Reduce margin/padding space to left/right of content in mobile Expound theme

  • Unknown's avatar
    drnathancharpentier · Member ·

    I’m using the special customized version of Expound on WordPress.com…I like that it has a responsiveness to the mobile theme but I think that the amount of margin space on the sides of my content are too large and would like less margin space (a lot of empty wasted space).

    What custom CSS can I put in to reduce the amount of margin space in the main context on a phone? I tried #primary {margin-left: -15;} but that creates a weird double line at the bottom of the mobile page where the divider is and changes the desktop…

    Also, I want the image header to also reduce in size as I’m going to the mobile version – I tried to get around it by squishing the logo to be much smaller and centered but I don’t want to make it any smaller and just want the overall header image to reduce in size to fit on mobile screen. Any advice on the code for that?

    Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hfzrhmn · Member ·

    This is the code that affects left/right spacing on mobile screen: 

    @media only screen and (max-width: 868px) {
	.site-header .home-link,
	.main-navigation,
	.site-main,
	.site-footer .sidebar-inner,
	.site-info,
	.site-main .sidebar-container,
	.one-footer-sidebar .site-footer .widget-area,
	.two-footer-sidebars .site-footer .widget-area,
	.three-footer-sidebars .site-footer .widget-area {
		margin: 0 auto;
		width: 90%;
	}
}

    So basically there’s no padding; it’s just that the width of the area is 90% and then it’s centered.

    To reduce the padding, increase the width.

    Your current header image fits on 320px browser width, and I think that’s a good base for minimum width to work on. I’m not quite sure what I can help in that regard.

  • The topic ‘Reduce margin/padding space to left/right of content in mobile Expound theme’ is closed to new replies.