CODEWITHSUNDEEP
htmlcssmedia-queries
webta.st.ic
webta.st.ic

Reputation: 5179

Inherit properties from lower media query

I have a wrapper with some divs within. My goal is to display the divs different on different viewports. On smaller viewports than 500px they should take the whole width of 100% and wrap in a column. On a viewport of min: 500px and max: 768px they should take 50% of the row and wrap again (so maximum two divs in a row). On the viewport with min: 1025px they should have a with of 1/3 of the whole row and again wrap (so maximum three divs in a row). They also have some spaces on right and bottom solved with margin.

My question: Is it possible to inherit properties on a larger media query from a lower one? If you take a look on my css, in the first media query (min: 500px and max: 768) they get the first time a margin-right of 36px. This margin-right should be the same on all wider viewports. My goal was it, just to change the width and it would take the margin-right which was set last in the css, in this case that one from the lowest media query. At the moment this isn't working. I have to repeat myself and put the same margin-right on all medie queries, than it works. Why the inherit doesn't work? He also inherits the display properites for all wrappers without setting it in every media query, why isn't he inheriting also the margin-right? Hope it's clear enough.

Here also a codepan, where you can easy resize the screen: https://codepen.io/STWebtastic/pen/zRvdEv

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: strech;
  border: 1px solid lightcoral;
  padding: 10px;
}

.wrapper__item {
  border: 3px solid black;
  width: 100%;
  margin-bottom: 10px;
}

.wrapper__item:last-child {
  margin-bottom: 0;
}

@media (min-width: 500px) and (max-width: 768px) {
  .wrapper__item {
    width: 47%;
    margin-right: 36px;
    margin-bottom: 36px;
  }
  .wrapper__item:nth-child(2n) {
    margin-right: 0;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .wrapper__item {
    width: 48%;
  }
}

@media (min-width: 1025px) {
  .wrapper__item {
    width: calc(100% / 3 - 24px);
  }
  .wrapper__item:nth-child(2n) {
    margin-right: 36px;
  }
  .wrapper__item:nth-child(3n) {
    margin-right: 0;
  }
}
<div class="wrapper">
  <div class="wrapper__item">Item 1</div>
  <div class="wrapper__item">Item 2</div>
  <div class="wrapper__item">Item 3</div>
</div>

Upvotes: 0

Views: 512

Answers (1)

IamCavic
IamCavic

Reputation: 368

Here is the code just fine tune the numbers to position things correctly:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: strech;
  border: 1px solid lightcoral;
  padding: 10px;
}

.wrapper__item {
  border: 3px solid black;
  width: 100%;
  margin-bottom: 10px;
}

.wrapper__item:last-child {
  margin-bottom: 0;
}

@media (min-width: 500px){ // Changed
  .wrapper__item {
    width: 40%; // Changed
    margin-right: 36px;
    margin-bottom: 36px;
  }
  // Changed
  .wrapper .wrapper__item:nth-child(2) {
    margin-right: 0;
  } // End Change
}

@media (min-width: 769px) { // Changed
  .wrapper__item {
    width: 48%;
  }
}

@media (min-width: 1025px) {
  .wrapper__item {
    width: calc(100% / 3 - 31px); // Changed
  }
  .wrapper__item:nth-child(2n) {
    margin-right: 36px;
  }

  .wrapper__item:nth-child(3n) {
    margin-right: 0;
  }
}

Make sure to allocate enough space for each element at each viewport

Upvotes: 1

Related Questions