CODEWITHSUNDEEP
css
Jeff
Jeff

Reputation: 4003

Change width size using CSS when window size is reduced

In general, I want my body div to be 60% width of the window size. But there are some exceptions.

On a large monitor, this gets too big, so I have set a max-width of 800px, like so: 

#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}

This works pretty good, the text adjusts within a certain range, but at certain max threshold holds it shape.

Now I want to do something similar for small window sizes.

I've added 'min-width: 300px;' and this seems generally seems to override the width 60%, However, if the screen size is less than 300px, the user will have to scroll horizontally to see part of the text.

I would prefer for the actual width size to change 90% or 100% after the viewer size hits the 300px threshold.

Any ideas on how I could do this?

Upvotes: 2

Views: 8796

Answers (2)

Derek Story
Derek Story

Reputation: 9583

You can use a media query to achieve this: JS Fiddle Example

@media only screen and (max-width: 300px) {
  #lbp-text-body {
     // Whatever Styles you want to have at 300px or less
  }
}

You can also use media-queries to have specific styles if the window is greater than a specific width using min-width.

@media only screen and (min-width: 800px) {
  #lbp-text-body {
     // Whatever Styles you want to have at 800px or more
  }
}

As a side note, you will want to be sure you have the correct viewport meta tag for media queries to work properly on each device: Viewport Meta Tag

Upvotes: 6

Andrea
Andrea

Reputation: 849

I woul use a media query to determine the size of the screen, and change the % width based on that:

@media (max-width: 300px) {
  width: 90%;
}

The browser will read through your existing CSS and apply the styles you described in your question. The media query tells the browser to apply this new width to any screens that fit the criteria - a screen that is at most 300px wide. If you have other breakpoints (in this case, widths) that you would like to target, you can definitely use more than one media query at a time.

See: detect browser size and apply css for every resolution

also: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Upvotes: 2

Related Questions