CODEWITHSUNDEEP
htmlcssmargin
greggyb
greggyb

Reputation: 3798

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

Upvotes: 2

Views: 1977

Answers (2)

sheriffderek
sheriffderek

Reputation: 9043

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/

Upvotes: 3

Skylar
Skylar

Reputation: 924

  1. What am I doing wrong here?

  2. What is the math that makes 80-4=55?

The main problem is that the media query uses the styling for the document, not the container class. This means that 1em in the query is different than 1em in the container div. For example, this snippet uses the same styling for the text that the document uses, so it works. Note that I also set the body's margin to 0 because the margin of the body is also included in the media query. This solution, as I'm sure you'll agree, is not the desired result.

Not-So-Good Version

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 55em;
  text-align: justify;
}

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

body {
  margin: 0;
}
<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>

  1. How should this goal be achieved instead?

Instead, I would recommend a flexbox. Set the container class style to be just

display: flex;
justify-content: center;

and move the other styling to the content class. Set the margin of the content class to auto 2em. (see the snippet below)

Good Flexbox Version

.container {
  display: flex;
  justify-content: center;
}

.content {
  margin: auto 2em;
  max-width: 55em;
  font-family: monospace;
  font-size: 16pt;
  line-height: 1.3;
  text-align: justify;
}
<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>

Upvotes: 2

Related Questions