Search code examples
htmlcssmargin

CSS width and margins don't add up with media query

I am building a blog layout. The goal is to have content centered in the window, and justified, with a maximum width and a minimum distance to the border of the window.

I have gotten this working with a combination of max-width and a media query to set margins at a certain threshold. I tried putting both max-width and fixed margin-left and margin-right together, but this failed.

So, I've gone with the solution below, where I have a max-width combined with margin-left: auto; margin-right: auto, and separately I have a media query where I set margin-left: 2em; margin-right; 2em.

This works mostly fine, but I am very confused about the media query I've had to define to get this to work seamlessly. CSS is below and you can see a sample page here.

I expect that with max-width: 55em; for my content, and a media query that kicks in at (max-width: 59em) and margins on either side of 2em, that there should be a seamless transition, with the text never touching the border of the window.

With the version below, I get to a transition point where the text touches the edge of the window for a range of size before the margins kick in and the text retracts from the edge. I figured 55+4=59, and so at 59, I get 4em total of borders, and the text should recede from the edge at that point, as I resize my window smaller; this does not happen.

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}


.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 59em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}
<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

The value that works as I intend is below, and you can see a version here. Here I have everything the same, except for the media query: (max-width: 80em). I got here purely through guessing and checking. If I resize my window down, I see a smooth transition where the text never approaches the window border, or touches it.

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}


.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (max-width: 80em) {
  .container {
    margin-left: 2em;
    margin-right: 2em;
  }
}
<div class="container">
  <div class="content">
    <article>
      Here is a nice long paragraph which should
      certainly hit the wrap limit.
      It should do this because it is a long paragraph,
      with more words and characters than fit in the
      maximum width configured for this page.
      I have written multiple sentences in a row, to
      ensure that this will take ample screen space horizontally.
      I am good at writing like this.
    </article>
  </div>
</div>

So, my question is one, some, or all of the below:

  1. What am I doing wrong here?
  2. What is the math that makes 80-4=55?
  3. How should this goal be achieved instead?

Edit: Adding some gifs, because I was bad at explaining this.

Here is bad: note that there is a period of time as I'm resizing where the text is bang up against the window border. I don't want this. I expect that the 2x2em margins, which kick in at a width of 59em should start having an effect. Instead, there is a period, during resizing (aka some population of certain window sizes) where the text is bang against the window border.

bad margin behavior

And here's the good one. This has a media query with max-width: 80em. This has the behavior I want. See how the text never hits the window border, just smoothly starts retreating from it. 80em is the magic number (at least for me viewing from multiple browsers on my desktop - I do not know if this is a me-problem). Less, and I get the text approaching closer to the border and then it snaps to my 2em margins. More, and it is left-aligned, rather than centered.

good margin behavior

Solution

  • What about...

    * {
  box-sizing: border-box;
  /* https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
}

.container {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 1px solid red;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}

@media screen and (min-width: 900px) {
  .container {
    /* something else */
  }
}
    <section class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, doloremque iste sequi est autem officia asperiores, illo, vero reiciendis incidunt provident itaque laborum quidem! Aut nisi eaque a itaque numquam.</p>
</section>

    Maybe it's a border-box issue....

    https://www.paulirish.com/2012/box-sizing-border-box-ftw/