Jump to content

How to automatically resize the element width when screen sizes reduce


Recommended Posts


<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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

@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.




Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...