Jump to content

bootstrap grid width


Recommended Posts

i don't understand this.Desktop screen resolution: 1280x1024this code: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=hshould do a 4:8 split right? But on my monitor it's 3:9. It sees it like a small device.Also i don't understand the screen width in pixels bcz there are smartphones with QHD resoluton (2560x1440) so would they look at col-lg-* number then ?

Link to post
Share on other sites

Bootstrap uses media queries. The arrangement of the columns depends only on the width of the browser window, not of the device. If you have a large screen but your browser window isn't maximized it may adopt the arrangement that was set for small or medium screens depending on how wide the window is.

Link to post
Share on other sites

browser is maximized but it always looks at col-sm-*.

If i don't have col-sm-* but only have col-md-* or col-lg-* he stacks the columns vertically.

Also what is the size in pixels of a maximized browser window on a smartphone with a 5" screen and a 1440x2560 resolution? Under which col-*- does that fall under ?

Link to post
Share on other sites

This is bootstrap's documentation:

http://getbootstrap.com/css/#grid-options

 

A small device is between 768 and 991 pixels wide. A medium device is between 992 and 1199 pixels. A large device is anything wider than 1200 pixels wide. Anything under 768 is extra small.

 

Add this to your page to see if your smartphone is really as high a resolution as you think:

<script>    alert("Screen width: " + screen.width + "nWindow width: " + window.innerWidth);</script>
  • Like 1
Link to post
Share on other sites

i don't have a phone with that resolution, mine is 720x1280 which is under 768 needed for col-sm-* so on this pagehttp://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=hit should show stacked ? but it shows 3/9 split.if i turn it to landscape, so it's 1280 wide and should show 4/8, it again shows 3/9 split.same thing with a tablet in landscape mode 1280 wide.But what has screen size got to do with screen resolution anyway?That was my point with the QHD screen (2560x1440) on a 5.5" smartphone.Looking at the documentation:Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)by the description it would be a extra small (maybe a small device - phone/tablet - phablet ),but by the resolution it would be a large device.?

Link to post
Share on other sites

ok thishttp://www.displaycalibration.com/resolution.html and your codetold me my display resolution is 1024x819 ( down from default 1280x1024 bcz i increased font size in windows to medium - 125% ) so this containerhttp://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_large&stacked=hturns out 943px wide which is just under 992px needed for col-md so thats why it is using col-sm-* setting.On the phone and tablet in landscape it's 962px so again should be using col-sm-* which it is, so i guess it's all fine then.Thanks and sorry for the confusion.

Edited by matt11
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...