Getting default min-width settings to work once you go past the smallest amount

Question

I'm having some issues with min-width media queries. Right now everything works exactly as designed until the window screen becomes less than 375px. Once the screen goes less than this, .list__content reappears. Does anyone know how once it goes under 375px, it goes disappears?

Where is what I am hoping:

The window is less than or equal to 375px

.list__content dissapears
✅ .list__items 100% width

The window is between 375px and 768px

✅ .list__items, .list__content 50% width

The window is greater than 768px

✅ .list__items 33% and .list__content is 66%

.list {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
}

.list__items,
.list__content {
  position: relative;
}

.list__items_header,
.list__content_header {
  border-bottom: 1px solid black;
  padding: 5px;
}

.list__items {
  width: 100%;
  border: 0;
}

.list__content {
  width: 100%;
  display: block;
}

@media (min-width: 375px) {
  .list__items {
    width: 100%;
    border-right: 0;
  }
  .list__content {
    display: none;
  }
}

@media (min-width: 768px) {
  .list__items {
    width: 50%;
    border-right: 1px solid black;
  }
  .list__content {
    width: 50%;
    display: block;
  }
}

@media (min-width: 1032px) {
  .list__items {
    width: 33%;
    border-right: 1px solid black;
  }
  .list__content {
    width: 66%;
    display: block;
  }
}

<div class="list">
  <div class="list__items">
    <div class="list__items_header">i-h</div>
    items
  </div>
  <div class="list__content">
    <div class="list__content_header">c-h</div>
    content
  </div>
</div>

Since you have `list__content` outside media queries as well, it is shown below 375px. — m4n0, Aug 07 '20 at 19:00
@m4n0 Even if I remove it, it still shows up. I'm not sure what I can change to make it disappear. — bryan, Aug 07 '20 at 19:05
You didn't mention, what is your requirement for **"`between 768px and 1032px`"** — UkFLSUI, Aug 07 '20 at 19:06
@RakibulIslam I've edited my post to be more precise. I apologize for that. — bryan, Aug 07 '20 at 19:20

UkFLSUI · Accepted Answer · 2020-08-07T19:36:13.033

You are setting display: none; in .list__content for media query min-width: 375px, but you need to set that for max-width: 375px. The reason is that:

max-width: 375px means 375px and down
min-width: 375px means 375px and up

.list {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
}

.list__items,
.list__content {
  position: relative;
}

.list__items_header,
.list__content_header {
  border-bottom: 1px solid black;
  padding: 5px;
}

.list__items {
  width: 100%;
  border: 0;
}

.list__content {
  width: 100%;
  display: none;
}

@media (max-width: 375px) {
  .list__items {
    width: 100%;
    border-right: 0;
  }
  .list__content {
    display: none;
  }
}

@media (min-width: 375px) {
  .list__items {
    width: 50%;
    border-right: 1px solid black;
  }
  .list__content {
    width: 50%;
    display: block;
  }
}

@media (min-width: 768px) {
  .list__items {
    width: 33%;
    border-right: 1px solid black;
  }
  .list__content {
    width: 66%;
    display: block;
  }
}

<div class="list">
  <div class="list__items">
    <div class="list__items_header">i-h</div>
    items
  </div>
  <div class="list__content">
    <div class="list__content_header">c-h</div>
    content
  </div>
</div>

Or, just set `.list__content { display: none; }` as the default state, and let `min-width` take effect as normal. Note that right now, at exactly 375px, `display` has a state of both `none` and `block`, which is why a lot of people have started using things like `max-width: 374.98px`... — Heretic Monkey, Aug 07 '20 at 19:46

score 0 · Answer 2 · answered Aug 07 '20 at 19:07

I changed some of the CSS code. This is how you can do it :

.list {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: flex;
}

.list__items,
.list__content {
  position: relative;
}

.list__items_header,
.list__content_header {
  border-bottom: 1px solid black;
  padding: 5px;
}

.list__items {
  width: 100%;
  border-right: 1px solid black;
}

.list__content {
  width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .list__items {
    width: 50%;
  }
  .list__content {
    width: 50%;
    display: block;
  }
}

@media (max-width: 375px) {
  .list__items {
    width: 100%;
    border-width: 0;
  }
  .list__content {
    display: none;
  }
}

@media (min-width: 1032px) {
  .list__items {
    width: 33%;
  }
  .list__content {
    width: 66%;
    display: block;
  }
}

<div class="list">
  <div class="list__items">
    <div class="list__items_header">i-h</div>
    items
  </div>
  <div class="list__content">
    <div class="list__content_header">c-h</div>
    content
  </div>
</div>

Getting default min-width settings to work once you go past the smallest amount

2 Answers2