Change width size using CSS when window size is reduced

Question

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?

Derek Story · Accepted Answer · 2015-07-14 15:14:27Z

6

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

edited Jul 14, 2015 at 15:14

answered Jul 14, 2015 at 15:02

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:28:35Z

2

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

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 14, 2015 at 15:09

Andrea

8498 silver badges23 bronze badges

Collectives™ on Stack Overflow

Change width size using CSS when window size is reduced

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related