CODEWITHSUNDEEP
htmlcsswidthpercentage
SJ19
SJ19

Reputation: 2123

CSS Can I set a higher % width on smaller screens?

I set a width of 70% on my , which looks ok, but for mobile screens it wouldn't hurt if the width was higher, say 90%.

So my question is... Is there a way to make the site's width higher percentage if the screen is smaller?

Upvotes: 0

Views: 1835

Answers (3)

Nil
Nil

Reputation: 411

You should use media query for that:

div {
width:70%;
}

@media only screen and (max-width: 500px) {
    div {
        width:90%;
    }
}

Get a head start on media queries

Or use a framework like bootstrap

Using bootstrap, you can achieve that using:

<div class="col-md-10 col-md-offset-1 col-xs-12">blah blah</div>

Upvotes: 3

ngstschr
ngstschr

Reputation: 2319

You can combine your size media query with a resolution media query:

@media (max-width: 600px) and (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browser */
       (max-width: 600px) and (min-resolution: 2dppx), /* The standard way */            
       (max-width: 600px) and (min-resolution: 192dpi) /* dppx fallback */

Upvotes: 0

Josh Harrison
Josh Harrison

Reputation: 121

A little light reading on media queries:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.content {
   width: 70%;
 }

@media (max-width: 600px) {
 .content {
   width: 90%;
 }
}

Upvotes: 0

Related Questions