Ad

Mystery Margin/Padding In Shopify Mobilia Theme

- 1 answer

I'm currently butchering a product page template from the Shopify Mobilia theme and I cannot get rid of the margin/padding down either side of the page. I've scoured the CSS and used Firebug with no success.

The header is fine but the content and footer have about 50px on the left and 80px on the right on a 1080p display. This is fine for the content with a white background but a bit ugly for the divs with brown backgrounds.

Page in question: http://higher-tea.com/products/subscription

Any suggestions gratefully received.

Thanks.

Ad

Answer

I looked into your code and it shows that

div.container {
    margin: 0 auto;
    padding: 20px 0;
}

now margin:0 auto, works in mysterious ways, it basically horizontally align the element on which it is applied leaving the same margin on both side, i guess so the original width was 1080px but now the page has only 960px width (reference below)

@media only screen and (max-width: 1199px) and (min-width: 960px)
.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

so it leaves us with 1080-960=120px, so basically 60px 60px margin on right and left and also, the child container of .container is just 940px long and does not have center alignment so the remaining 20 gets added to the right side space thus making a 60px and 80px margin on both sides, hope this helped (reference below)

container .sixteen.columns {
    width: 940px;
}
Ad
source: stackoverflow.com
Ad