How to automatically resize the element width when screen sizes reduce

[newcoder1010]

Hello,

<div class =""> test </div>

 

.condition-box {
 padding: 0px;
 text-align: center;
 width: 80%;
 margin: auto;
}

 

80% width would be the normal/least width of the element.  As I am reducing my screen size, I would like the div element to get bigger up to 90% width of the screen. How can I do it?

 

[Ingolme]

At which screen resolution should it reach 90%. You can use a media query to set it to 90% at a certain screen size.

Percentages are always relative to the screen size, so when the screen shrinks, so does the element. There is no way to make it gradually change between percentages, you have to choose an absolute unit like pixels or ems and use percentages for the max-width property.

[shaili_shah]

css media query is best for this.

I've written the code in fiddle you can check here : https://jsfiddle.net/rgdwsyan/2/

When you reduce the screen size to the 766px you can see the div size will be 90%.

Hope this is your answer.

[newcoder1010]

@IngolmeI do know media query. I am having the problem with the media query. 

Lets say I set the div width to 80% for screen size bigger than 992px. 

I am on my laptop which has 1334px. So it looks fine in 1334px but 80% width does not look good when screen size gets to between 992 and 1200px. As I am reducing screen, I like the width gradually increase to 90% until screen is 992px.

Thanks!

 

 

[melahi]

It's not clear what you are trying to achieve.

The main reason for limiting width of things is that it's tiring to read long lines. There are several practical solutions: When the screen gets wider you can select column-count which is how news papers used to tackle this issue. A simpler solution is to set a max-width, but an alternative might be to specify font-sizes in vw units (vertical width) thus simply making the text bigger.

Can you explain what you are trying to solve?