Question 108620 in Html Question posted in
Some basic documentation can be found here.

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

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>
Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    You can set the adaptive size of the logo without media query using the clamp() function.
    In the example below, the logo will increase in size from minimum 100px to maximum 200px and the preferred value in 20vw:

    .logo {
  width: clamp(100px, 20vw, 200px);
  display: block;
  margin: auto;
}
    <img class="logo" src="https://via.placeholder.com/200" alt="">
    Login or Signup to reply.
  3. 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.

    Login or Signup to reply.
  4. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search