Site logo

Archived topic

Custom margins for mobile

11 replies · Started by George on March 1, 2015

Viewing posts 1–12 of 12

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!

Absolutely - you'll need to use some custom CSS targeted for mobile like this:

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

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;
	}
}

Looks good to me! Good job :)

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

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

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

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

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?

No problem!

That would be amazing! There's an ongoing development link in my signature below :)

Thanks!

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

That's amazing, thank you so much! Incredibly generous :)

This archived topic is closed to new replies.