CODEWITHSUNDEEP
cssless
meds
meds

Reputation: 22956

If width of parent element is less than 500px set children width to auto?

I have some spans laid out inside of div whose width is set to 100%, each span has styling on it to give it 500px width.

So like this:

<div>
<span style="width=500px">child span</span><span style="width=500px">child span</span><span style="width=500px">child span</span><span style="width=500px">child span</span>
</div>

When the width of the parent div goes below 1000px I'd like the spans to now have their width set to 100%

<div>
<span style="width=parent.Width < 1000px ? auto : 500px">child span</span><span style="width=parent.Width < 1000px ? 100%: 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span><span style="width=parent.Width < 1000px ? 100% : 500px">child span</span>
</div>

Upvotes: 0

Views: 814

Answers (3)

Viira
Viira

Reputation: 3911

Try media queries!

Reference: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

span {
  display: inline-block;
  width: 500px;
}

@media screen and (max-width:1000px) {
  span {
    display: block;
    width: 100%;
  }
}
<div>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
</div>

Upvotes: 0

Raymond Natio
Raymond Natio

Reputation: 672

You will need to make use of @media(max-width) here. And remember span width by default is auto. So you need to add display styling too.

span {
  display: inline-block;
  width: 500px;
}

@media(max-width:1000px) {
  span {
    display: inline;
    width: 100%;
  }
}
<div>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
  <span>child span</span>
</div>

Upvotes: 1

K K
K K

Reputation: 18099

Try this:

div {
  width: 100%;
  outline: 1px solid red;/*remove this. it is only for visualisation*/
}

div span {
  max-width: 500px;
  width: 100%;
  display: inline-block;
}
<div>
  <span>child span</span><span>child span</span><span>child span</span><span>child span</span></div>

Try resizing the editor to see the results. And remove inline styles.

Upvotes: 1

Related Questions