Archived topic
No Margins With iPhone (Mobile)
7 replies · Started by Ken on September 21, 2021
Hi, I'm miffed. You good folks gave me the following CSS to help create more 'white margin' with mobile devices.
@media (max-width:768px){
body.blog div#content, body.archive div#content, body.home div#content {
padding: 20px;
}
}BUT, for some weird-strange reason ALL my posts as well as Legal Pages (About, Privacy, etc) have no margins. The text butts right up against the edge of my iPhone.
Only the Home page, and category pages have the correct white margin space.
So I deleted the above '@media.... and the only padding I'm using now is the following:
body.blog div#content, body.archive div#content, body.home div#content {
padding: 40px;
}Is there any magic code good folks can pull out of your 'coding hat' that'll give more white margins for Legal Pages and posts with mobile?
**Note: The Category pages and home page are fine.
Also, I DO need more margin space only for Legal pages. All the text is butted up on both mobile and desktop.
As always, I appreciate you patience and continued help.
page links below if you want to see examples with mobile device.
Hi Ken,
The CSS will only work on blog page/archive pages and home page, so it's completely normal that your posts and other pages don't have the paddings as your entire site is set to full width (no paddings by default).
So do you want the 20px across your entire site except the legal page(for more paddings)?
If so, try change this CSS:
@media (max-width:768px){
body.blog div#content, body.archive div#content, body.home div#content {
padding: 20px;
}
}to this:
body:not(.privacy-policy) div#content {
padding: 40px;
}And for the legal page where you want more paddings:
.privacy-policy #content {
padding: 60px;
}Hi Ying,
Wow! Yes that fixed the problem for mobile and legal pages for desktop. However, it created a new problem. Now all my "Desktop" regular posts have too much margin.
Is there a way I can fix it?
I deleted the following hoping that would fix the problem but it didn't.
body.blog div#content, body.archive div#content, body.home div#content {
padding: 40px;
}Just to confirm, you want:
1. On mobile to have 40pxfor entire site and 60pxfor the privacy page
2. On desktop only the blog/home/archivepages to have 20px paddings and leave the rest of the site?
If so, use this CSS for mobile:
@media (max-width: 768px) {
body:not(.privacy-policy) div#content {
padding: 40px;
}
.privacy-policy #content {
padding: 60px;
}
}And this for desktop:
@media (min-width: 769px) {
body.blog div#content, body.archive div#content, body.home div#content {
padding: 20px;
}
}Let me know :)
First, Yes, love to
1. have mobile 40px for entire site an 60px for legal pages
2. desktop blog/home/archive 20px
the above would be nice.
So far only mobile is good to go.
Only desktop 'posts' have way too much white-space margin. Home page and Archive pages are OK
ooops, looks like mobile is backe to butt-to-butt text.
The code you gave me
@media (min-width: 769px) {
body:not(.privacy-policy) div#content {
padding: 40px;
}
.privacy-policy #content {
padding: 60px;
}
}But this code you gave me earlier works fine
body:not(.privacy-policy) div#content {
padding: 40px;
}Along with this code:
`.privacy-policy #content {
padding: 60px;
}
Hi Ying,
After spending more time with the wider margin desktop posts, I like it. It's much easier to read.
Bottom line... All is good... ٩(^ᴗ^)۶
I'm marking this topic as resolved.
Thank you so much for helping me. Wish I had your 'magic hat of codes'! LOL!
Oops, I'm very sorry Ken, there was a typo in my CSS, I've corrected here:
https://generatepress.com/forums/topic/no-margins-with-iphone-mobile/#post-1938472
But you might not need the mobile specific one now, glad you played with the code and found a solution :)
