3

.ains is my central story div and need to have flexible width
is there a shorter way - some formula or anything - to say this (without javascript)

.ains{width:50%;}
@media only screen and (max-width: 1366px){.ains{width:60%;}}
@media only screen and (max-width: 1280px){.ains{width:70%;}}
@media only screen and (max-width: 1080px){.ains{width:80%;}}
@media only screen and (max-width: 999px){.ains{width:90%;}}
@media only screen and (max-width: 720px){.ains{width:100%;}}
qadenza
  • 9,025
  • 18
  • 73
  • 126
  • By doing the maths I saw you're going to have the div at ~800px at any given breakpoint. Have you considered to just specify the width of the element? `width: 800px;` – Adriano Dec 16 '20 at 05:20
  • @Adriano - and what if screen is `640px` - or `1400px` - for example – qadenza Dec 16 '20 at 06:07
  • You can use `width: 800px; max-width: 100%;` in this way it will be a div of 800px, unless its parent is smaller, in that case it will be 100% of its parent. – Adriano Dec 17 '20 at 01:13

3 Answers3

1

One approximation is to use width:max(800px,50%);max-width:100%;

.ains{width:50%;height:50px;background:red;}
@media only screen and (max-width: 1366px){.ains{width:60%;}}
@media only screen and (max-width: 1280px){.ains{width:70%;}}
@media only screen and (max-width: 1080px){.ains{width:80%;}}
@media only screen and (max-width: 999px){.ains{width:90%;}}
@media only screen and (max-width: 720px){.ains{width:100%;}}
<div class="ains"></div>

<div style="width:max(800px,50%);max-width:100%;
background:blue;height:50px;"></div>

Or clamp(50%, 800px, 100%);

.ains{width:50%;height:50px;background:red;}
@media only screen and (max-width: 1366px){.ains{width:60%;}}
@media only screen and (max-width: 1280px){.ains{width:70%;}}
@media only screen and (max-width: 1080px){.ains{width:80%;}}
@media only screen and (max-width: 999px){.ains{width:90%;}}
@media only screen and (max-width: 720px){.ains{width:100%;}}
<div class="ains"></div>

<div style="width:clamp(50%, 800px, 100%);
background:blue;height:50px;"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

Caution: It's not gonna solve the issue but it might help.

As long as you mentioned a Formula, the answer is yes there is one. you can have a mathematical approach to your issue as well. Considering the slope of -15.730 and the offset of 2347.400 in y = slope*x + offset formula, you can get to the ains' width accordingly.

enter image description here

Say we want to find out the width when on a 1080 screen. so we have 1080=-15.730*x+2347.400: enter image description here

which very closely gets us to the width point of ~80.(this)

so the .ains width will always be calc((2347.400 - vw-in-px)/1573). but it seems like there's no way to convert vw to px in css without using js.

Mahmood Kiaheyrati
  • 512
  • 4
  • 14
0

I think what you're asking for is conditionals in CSS. The way to do conditionals in CSS is exactly as you've written above unless you want to use multiple classes or use something like SASS

Here is a really good response to someone asking a similar question.

CSS Conditionals

brent-franklin
  • 76
  • 8