How can I make the width of a div go from 100% to a lower percentage as the screen gets bigger?

Question

I'm trying to get a logo in a div to appear bigger proportionally on mobile than on desktop. It looks great at 100% width on mobile, but on desktop it's way too big. How could I scale the div's width percentage down as the screen gets bigger? Essentially going from 100% at the lowest screen dimension to 30% at the highest.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 3%;
}

#logo {
  width: 100%;
  height: auto;
}

<div class="outer">
  <div class="middle">
    <div class="inner" style="max-width:100vw;">
      <img id="logo" src="https://via.placeholder.com/100">
    </div>
  </div>
</div>

CSS media queries will allow you to target different device sizes — imvain2, May 01 '23 at 19:59
Does this answer your question? [CSS media queries for screen sizes](https://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes) — imvain2, May 01 '23 at 19:59

Al John · Accepted Answer · 2023-05-01T20:11:50.783

Using media queries is a way to change CSS for different screen sizes like this:

/* Default element size: */
div {
    width: 25%;
}

/* Screens smaller than or equal to 991px */
@media screen and (max-width:991px) {
    div {
        width: 50%;
    }
}

/* Screens smaller than or equal to 768px */
@media screen and (max-width:768px) {
    div {
        width: 75%;
    }
}

Instead of max-width you could also use min-width to indicate that the screen should have this width at minimum for the styles to apply. You could even use print instead of screen to apply styles for when a user wants to print the page (e.g. press CTRL + P to print a page).

score 0 · Answer 2 · answered May 01 '23 at 21:24

0

You can do it just with media queries.

/* for mobile devices */
@media screen and (max-width:768px) {  
    your-div {
        width: 50%;
    }
}

which means for screens smaller than 768 pixels. you can change this value if you want.

answered May 01 '23 at 21:24

cihankaba

7
6

score 0 · Answer 3 · answered May 01 '23 at 23:28

Use clamp(). Here a basic example where I am using random values to illustrate the trick. The image will go from 100px on big screen to 400px on smaller.

.outer {
  display: grid;
  place-content:center;
  position: absolute;
  inset:0;
}

.inner {
  margin: auto;
  width: clamp(100px,400px - 50vw,400px);
}

#logo {
  width: 100%;
  height: auto;
}

<div class="outer">
    <div class="inner" style="max-width:100vw;">
      <img id="logo" src="https://via.placeholder.com/100">
    </div>
</div>

How can I make the width of a div go from 100% to a lower percentage as the screen gets bigger?

3 Answers3