Footer background color cuts off at bottom of mobile and tablet browsers

user_13190279 0
Viewed 481

The background color of the footer keeps getting cut off at the bottom of mobile browser viewports. The same happens for tablets, but only when the tablet is turned horizontally. I've tried EVERYTHING I found online and other related questions to fix this. Does anyone have any suggestions before I punch my laptop screen? You can view the site at www.lamarplaterimages.com. I'm viewing the site on my iPhone 11 and iPad Pro.

Here is the default footer CSS

footer {
background-color: #133e68;
margin-bottom: 0;
padding-bottom: 0;
bottom: 0;
}

Here is the CSS for the 375px media query.

footer {
height: 100%;
}

This is the problem that I'm having. The text is still there. Just the background color is getting clipped off.

enter image description here enter image description here

Any and all help is greatly appreciated.

responsive-design footer mobile-safari css html
1 Answers

I don't think of any way how 100% will be correct, when you work with width yes, but with height this will never work and if it does it will take all the screen setting height to 100% 30% ... or any relatvie unit will work only of the container has a fixed heitght, for example set body height to 100vh or 500px ...

footer {
 height: 100%;
}

Try to fix the container height (ex: body), example px, vh. or use no-relative unit for footer, to check your code if % has any effect, try 200% 3000% or any other value you will not observe any changes since 100% or 50% of what ?

user_118762010
Related