CODEWITHSUNDEEP
htmlcss
Mokgadi Rasekgala
Mokgadi Rasekgala

Reputation: 111

Constant div size when minimizing browser window

I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.

How do I achieve this?

Upvotes: 1

Views: 3100

Answers (2)

UI dev www.bijudesigner.com
UI dev www.bijudesigner.com

Reputation: 1

Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries

ex:

/* Small Mobile Devices ( < 768px ) Style Begin */
 @media (min-width: 0px) and (max-width: 767px) {

   .div-elements-name {
   width:100%;
}

}

Upvotes: 0

Stefan
Stefan

Reputation: 1895

You are probally looking for

min-width: 800px;

If the width gets under 800px now the div wont resize smaller and just stay at this width.

Just make sure you add a media query like this:

div{
  width: 60%;
}

@media (min-width: 601px) {
  div{
    min-width: 800px;
  }
}

@media (max-width: 600px) {
  div{
    min-width: 400px;
  }
}

Upvotes: 1

Related Questions