Footer and page overlapping on mobile browsers

cage108 · Member · Feb 17, 2016 at 8:13 pm
Copy link

Add topic to favorites
Hi,
Please bear with me if this becomes too long winded…

On my site, there are certain pages where I have added a sort background box using CSS which the Theme author helped me with. This was that original CSS
```
.page-id-1771 #main {
	max-width: 1154px;
	margin: auto;
	padding: 20px;
	background: rgba(255,255,255,0.5);
	border-radius: 22px;
	color: #222;
	text-shadow: none;
}
```
This worked fine for a while, and then all of a sudden it stopped working properly even though nothing had changed on the theme or the CSS ( the box started overlapping the footer ). The theme author then assisted me again with changing the CSS to the following
```
.page-id-1771 #main {
	max-width: 1154px;
	margin: auto;
	padding: 20px;
	background: rgba(255,255,255,0.5);
	border-radius: 22px;
	color: #222;
	text-shadow: none;
	padding-bottom: 0 !important;
}
.page-id-1771 #footer {
	clear: both;
}
```
This has fixed the issue with the box however after making these changes, all the pages that has this box are not appearing properly on mobile browsers. The footer and page content are overlapping each other. This is an example of page where this is evident on mobile browsers.

This is a screengrab that I took from my phone ( to save you the trouble of opening on your phone

Can anyone suggest any enhancements to the CSS to solve this problem on mobile browsers? Any suggestions will be appreciated.

The blog I need help with is: (visible only to logged in users)
carladoria · Member · Feb 17, 2016 at 9:00 pm
Copy link
Hi there,
Maybe you can try using the following media query. Usually mobile devices (including tablets/ipads) are below the 992px, so any of the changes you made with this CSS should only activate for web browsers.

@media screen and (min-width: 992px) {
.page-id-1771 #main {
max-width: 1154px;
margin: auto;
padding: 20px;
background: rgba(255,255,255,0.5);
border-radius: 22px;
color: #222;
text-shadow: none;
padding-bottom: 0 !important;
}
.page-id-1771 #footer {
clear: both;
}
}

Hope this works ;)
cage108 · Member · Feb 17, 2016 at 9:10 pm
Copy link
such a rockstar… that looks perfect. Thank you so much.
So if I can pick your brain a little further … is there a method of adding this additional media screen option in CSS so that it automatically applies to any future pages as well, or is the safest bet to deal with it on a page by page basis… To be clear, I have no issue adding this in page by page, but just trying to educate myself at the same time.
I cannot thank you enough…
carladoria · Member · Feb 17, 2016 at 9:58 pm
Copy link
Glad to know it worked :)
You mention:

there are certain pages where I have added a sort background box

so you’ll probably have to add this only to the pages where you made this change. In this case, you’ll have to do it manually.

Most of the themes are responsive to mobile devices and already include these media queries in strategic places, but if you want to target all pages with a specific CSS, you’ll need to add the id: #page to your query, as in:

#page .”other specific classes”{
“code”
}

Check this link for more info about Media Queries:
https://en.support.wordpress.com/custom-design/custom-css-media-queries/
cage108 · Member · Feb 17, 2016 at 10:02 pm
Copy link
awesome, thanks for that… and also thank you for the additional resource. There is so much info to consume that sometimes novices like myself miss things like ( cause perhaps I didnt know what to even look for :) )

but thanks, I am a happy camper now and can go to sleep peacefully.

peace…
cage
cage108 · Member · Mar 13, 2016 at 11:46 am
Copy link
@carladoria if you get a chance, please have a look at another thread that I created also regarding mobile themes.

mobile theme background image issue

Many thanks…

cage

No items found.