How to increase site width with rem in Twenty Twelve theme

  • Hi there,

    I would really like some help to iron out an rem mystery in Twenty Twelve.

    I have made a child theme. I set the new max-width to 1024px and the rem to be 1024 divided by 14. I used the below CSS code:
    max-width: 1024px;
    max-width: 73.1428571rem;

    This however did not actually make the site width 1024px, it was narrower that it should be.

    I understand that by increasing the rem it will increase the width so I tried the below code and it DOES output the width to 1024px:
    max-width: 1024px;
    max-width: 84.10000rem;

    However, I am worried about why the ‘divide by 14′ is not giving me the rem that should be equal to the pixel width. I am also worried that if I leave it at 84rem, will it stuff up the theme’s responsiveness? I realise this also affects the rem used elsewhere, such as in the margins where I have a pixel defined, eg 120px/14 = 8.57142857rem, and then the result does not reflect the actual 120px.

    I’d really appreciate any advice.
    You can view the site at: https://unknownjourney.com.au

    I’d really like to understand rem better before moving on with developing the site. Thanks in advance for any feedback! ??

Viewing 4 replies - 1 through 4 (of 4 total)

  • Measure again.

    Your first value 73.1428571rem will give it at 1024px. But the page also has left and right padding value of 2.85714rem which is 40px on each size.

    So at max-width 73.1428571rem, you got 1024+40(*2)= 1104px

    Thread Starter WordPress Fan

    (@wordpress-fan)

    Hi Paul,

    Thank you so much for having a look at this for me, your assistance is much appreciated!

    I changed my CSS back to reflect the first value 73.1428571rem, (as can be seen on the live site now at [See link above]) and it does not measure at your suggested 1104px wide. When I measure it I get 899px wide.

    I am sorry if this is something really obvious…but I am still confused about how the padding would make the actual full site width narrower.

    Many thanks.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    See the CSS box model https://www.w3schools.com/css/css_boxmodel.asp
    Border, padding and content affects width.

    Thread Starter WordPress Fan

    (@wordpress-fan)

    Hi Andrew & Paul

    I believe that I am seeing something different to you regarding the actual pixel width that is displayed on my screen.

    I have doing some cross browser testing and noticed that the width is displayed differently on each.

    For example, right now with my new site width of 1040px, in Firefox it displays for me at 911px, in Safari it displays as 1120px and Chrome is also 1120px.

    Is this change in displayed width a rem related cross-browser issue?

    Cheers.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to increase site width with rem in Twenty Twelve theme’ is closed to new replies.