[Resolved] Custom margins for mobile

[George]

Is there any way to use different element margins when on mobile? My margins are large for reading on large screens, but they end up being way to big for mobile.

As usual, thank you!

[Tom]

Absolutely – you’ll need to use some custom CSS targeted for mobile like this:

@media screen and (max-width: 768px) {
      /* mobile CSS in here */
}

[George]

Excellent! It worked great (after some experimentation looking for which elements I needed to target, and discovering there was extra spacing in the footer). Here’s my code for anybody else that might need it. Tom, I’m sure you have some feedback on it as well, just in case I targeted anything unnecessary. FYI, all of the feedback you have given me is easily worth the price I paid for GP premium 🙂

@media screen and (max-width: 768px) {
	.separate-containers .inside-article, .separate-containers .comments-area, 
					.separate-containers .page-header, .separate-containers .paging-navigation, 
					.one-container .site-content, .separate-containers .widget.inner-padding {
		padding-left: 25px;
		padding-right: 25px;
	}
	
	.separate-containers .site.footer-widgets {
		padding-left: 0;
	}
}

[Tom]

Looks good to me! Good job 🙂

[George]

Thank you. Hopefully the code will be useful for somebody else who is in the same boat as me.

[Tully]

Hi Tom

I am trying to do a similar thing – just want the right and left margins to be smaller than they are on mobile. I have tried the above CSS but nothing appears to change? It does work on one of my generate press websites, http://www.bendigodogtraining.com.au, but not on the other: http://www.campaspeworkingdogs.com/wordpress. Thanks Tom

[Tom]

The site where it’s not working is password protected so I can’t check.

[Tom]

Ah, you’re using Sections, so your CSS would be:

@media (max-width: 768px) {
    .generate-sections-inside-container {
        padding-left: 25px;
        padding-right: 25px;
    }
}

[Tully]

Hi Tom,

On its own that didn’t work, but when I inserted the .generate-sections-inside-container into the CSS in the above code from George it worked. As always, thanks for the amazing support for GeneratePress! Can I donate?

[Tom]

No problem!

That would be amazing! There’s an ongoing development link in my signature below 🙂

Thanks!

[Tully]

Just sent $100 your way. Thanks for all your help Tom and the great theme etc!

[Tom]

That’s amazing, thank you so much! Incredibly generous 🙂

[Author]

Posts