Archived topic
Weird mobile container size
9 replies · Started by Milo Lam on June 30, 2021
Hello,
I am having trouble with the container size on mobile devices (link in private). On desktop, there's a Layout Element that makes the post width 800px. However, on mobile, the content seems to not have any padding and are all stretched across the screen. Do you mind looking into this issue for me please?
Kindly appreciated.
Hi Milo,
That's the effect of having "Full width (no padding)" layout element option on a page.
The way to go is by custom CSS w/ @media rule.
Example:
@media(max-width:768px){
div#content {
padding: 30px;
}
}Great thanks, Elvin!
Just out of curiosity, is there some type of mobile Element feature on GP right now? My first instinct when I approached the site was to have the container to be full-width on desktop (so that the background is all white instead of just being contained to the container width and leaving the sides to be grey (default), content width to be at 800px, and on mobile there's a bit of padding on everything like the 30px you suggested.
For mobile, it's quite limited at the moment. Only Header and Block element have mobile options for now but I think the dev theme is already working on this for all parts (customizer and elements).
No problem. :D
Good to know! thank you! I will switch out the CSS when the new feature is ready.
No problem. :D
Hi,
Sorry to bother again but is there a way to target the CSS to just the blog posts?
After testing it out yesterday, I found that it applied to my normal content in other pages like the homepage too :(
Hi there,
you can use a WP Body Class - for the single posts that is single-post so for example:
.single-post #content {
/* your styles */
}Works great. Thanks for the helpfulness guys
Glad we could be of help
