How to center a containers content on desktop

[tjerkotten]

Hi,

I am working on a Dutch site for cooking and baking for my family and friends. I am using a very widescreen monitor at home and a 5k display at work. You can check the site here www.cookarama.nl

As you can see I have set the body size to 60% and I like it that way. What I don't like is that it's not centered in my monitors screen, but to the left. What code do I use in css for this and where do I put it, at the container properties of the body?

[PaulMathews · Accepted solution]

@tjerkotten Return the body width to 100% and instead change the section wrap width from 100% to 60%:

.wsite-section-wrap {
    display: table;
    table-layout: fixed;
    width: 60%;
}

[tjerkotten · Accepted solution]

That's crazy! It works like a charm and it's so simple. I was looking at the wrong thing. Thank you so much!

[PaulMathews · Accepted solution]

@tjerkotten Return the body width to 100% and instead change the section wrap width from 100% to 60%:

.wsite-section-wrap {
    display: table;
    table-layout: fixed;
    width: 60%;
}

[tjerkotten · Accepted solution]

That's crazy! It works like a charm and it's so simple. I was looking at the wrong thing. Thank you so much!

[PaulMathews · Accepted solution]

@tjerkotten To answer your follow up question where you'd like to see the section wrap revert to 100% width on mobile, you need to do the width reversion via a media query at the mobile breakpoint. So, below, is the section wrap code for the desktop (where we limit the width to 60%) and right below that, we've added a media query at the 767 pixel breakpoint to return the section wrap to 100% width for those mobile viewports:

/* Non-mobile viewports (constrain section width to 60%) */
.wsite-section-wrap {
    display: table;
    table-layout: fixed;
    width: 60%;
}

/* Mobile viewports (return section width to 100%) */
@media (max-width: 767px) {

  .wsite-section-wrap {
      width: 100%;
  }

}

[tjerkotten]

Thank you, that worked.

[tjerkotten]

Hi,

This solution solved the most important problems, but I have noticed something else. If I look at my tablet, vertically, everything is great. When I turn it sideways for a horizontal view, it presumes that it's a desktop I think, because the container width goes to 60%. Is there a workaround for this?