Footer showing up in middle of the page on mobile display

[emenox]

http://quramax.com/ Hello All i am new to this functionality please help me. i am using evolve theme on wordpres

[TechnoBear]

Welcome to the forums, @emenox.

On which page or pages are you seeing this? I can see multiple problems with the header, but not the footer. In fact, I’m not even sure what you mean by the footer; you don’t seem to be using one. Could you post a screen shot of the problem?

[emenox]

[emenox]

Thanks for replying. can you suggest me what are the problems with header

[TechnoBear]

Just with resizing the browser window, the image aspect is incorrect and it appears squashed. The text overlaps on the green navigation bar, and then as I scroll downwards, there’s a “jump” as that changes to a blue bar.

[PaulOB]

@emenox

Hello All i am new to this functionality please help me

Your footer is showing higher up because you have set a max-height for the 4 blue horizontal boxes and not removed the height when the boxes go vertical.

You don’t need a min or max-height on those boxes anyway as you are using flexbox and the equal columns will be automatic.

Add this code at the end of the stylesheet to negate the fixed heights you set.

.home-content-boxes,
.home-content-boxes .row {
    max-height:none;
min-height:0;
}

.home-content-boxes .row p {margin-bottom:0;}

.home-content-boxes .row  .content-box {padding-bottom:10px;}