* Edit *
Accidentally wrong picture was uploaded for standalone case. Now corrected
* Edit *
I am unable to set the column widths (with col-) within and iframe. The CSS selector seems to be completely ignored. The very same page if requested as a standalone page (not iframe) works as expected. Please see the attached pictures.
Standalone:
Within iframe:
The out of the box media widths are
-xs smaller than 768px
-sm 768px
-md 992px
-lg 1200px
So with your iframe set to 1000 will fall in the -md category. The way the columns work is, it will default to 12 wide if it is smaller than what is listed. Since you had it set to -lg and the iframe was only 1000, then the width automatically adjusted to 12 wide.
Example col-xs-6 will be 6 regardless of how big or small you make the screen but if you use col-sm-6, then it will be 6 until the screen width goes below 768px, which then it will automatically jump to 12 columns wide.
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 4 months ago.
I am working on 3 HTML5 responsive websites and they all need to be adapted for devices.
I understand so far the media queries for small devices and I have seen good score on that, 320px, 375px, 425px, 480px, 768px, 1024px.
Now the "problem" comes for bigger screen.
I still have few doubts, for example in the office where I am working they have really big screen 2560px but how should i write the right queries for that ?
I have an 11" macbook and my colleagues have also got a bigger one 13" where the homepage is showed in a different way.
Should i also set a max-width 1680px, max-width 1920px and max-width 2560px? I saw on Google that this are the most common big screens and is apparently "working" when I checked back in the office.
The real questions are: How should I work on bigger screen? Which settings should I use to show the same webpages on different big screens?
The answer is that you should have a final width you design for and then eventually center that div in the middle of the page, so that even if the screen gets wider, the only thing that'll get wider is the background surrounding the div. You will need to set width of the div to a fixed width.
Even for larger screens, there gets to be the point where scaling larger fonts, makes the experience to cumbersome to read. If the content were to be scaled to 100% of the browser's width, it would take too long for the reader to read the information desired, hence why centering a fixed div works. It is also conveniently less work for the developer as well.
In terms of smaller screens, you would probably need to scale the div that contains all your information to 100% of the browser's width at a certain breakpoint via media queries.
The end result should look like this:
100% browser width --> fixed centered div with a background
(mobile + tablets) (large screens)
Here are pictures of the buttons. I wanted the buttons to show up together because without columns they were dropping down to a new line and it looked ugly. Now it works on browser, but not on mobile. I'm sure this is because I defined 3 columns and mobile doesn't have room. But when the browser resizes it moves the buttons accordingly. How do I get it to do that on mobile?
Browser:
Mobile:
Here is the code I used:
<div class="row">
<div class="col-xs-4">Online Reputation</div>
<div class="col-xs-4">Review Management</div>
<div class="col-xs-4">SEO & Web</div>
</div>
On mobile devices, the available width to display elements is usually too narrow to have multiple in the same row while still keeping their texts readable (ie. Not truncated, heavily shrunk down, or wrapping within themselves).
The most common solution to this problem is to display the elements side-by-side when there is available space to do so, but start to stack them after the screen shrinks below a certain width (by styling them using media queries). This is a key part of responsive design, since desktop layouts rarely translate properly to mobile devices. (See Changing the Page Layout Based on Breakpoints for more details on this.)
Bootstrap has breakpoints built into the framework, so there's no need to do any extra work for it. You have the options of xs, sm, md, and lg, which correspond to predefined ranges of screen widths.
You've already used the xs breakpoint in col-xs-4, which basically means that at every possible screen width, the buttons should be 4 units wide. But this doesn't display properly on narrow mobile devices, as you've noticed - so your next option is to go one width higher and use col-sm-4. Doing so would preserve the 4 unit width at any screen width of sm and above, but would stack the buttons once the screen narrows to the xs range:
<div class="row">
<div class="col-sm-4">Online Reputation</div>
<div class="col-sm-4">Review Management</div>
<div class="col-sm-4">SEO & Web</div>
</div>
Here's a demo to show you how that looks. Hope this helps! Let me know if you have any questions.
You need to change text size to something smaller and or less padding of the buttons for it to fit on mobile. Where is your CSS?
I have a div tag like as below.
<div class="col-xs-5 col-md-2 col-lg-1"></div>
With the current resolution of window / device how would I know if it is going to apply either col-xs-5 or col-md-2 or col-lg-1.
The reason for this question is I have to request number of items to the server. If the bootstrap applies col-xs-5 I'll request 10 Items. Otherwise 20 items, 30 items respectively.
Is there any way I'll know which class is going to apply to my DIV tag ?
you need to take a look at the info found on their website http://getbootstrap.com/css/#grid
but what is happening is that when the div has <div class="col-xs-5 col-md-2 col-lg-1"></div> these class names it will apply them based on screen size. bootstrap works on a 12 column grid system so if you use col-xs-5 then it will only fill up 5 of those columns when the width of the screen is xs(mobile) then once the screen hits a medium sized screen it will only fill up 2 of those columns if you are using the col-md-2.
This doesnt actually change anything within your html its just reajusting the size of it.
For example there is a way to hide everything within a div at a certain screen size usig hidden. so if you wanted to hide everything at screen size xs then you would use a div class called hidden-xs this doesnt actually delete what you have on the screen but like its name it "hides" it.
btw the screen sizes for each class are as follows:
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
Bootstrap will let you style content differently based on device width, but if you want to load different/more/less content, you can detect the width with jQuery. Probably best to use the same breakpoints as Bootstrap to keep things consistent. Then somehow load that content you want based on the if statement that is true:
var width = $(window).width();
if (width < 767){
// load your "xs" content
} else if ((width >= 768) && (width < 991)) {
// load your "sm" content
} else if ((width >= 992) && (width < 1200)){
// load your "md" content
} else {
// load your "lg" content
}
That being said, bootstrap also allows for show/hide at different device widths, which could also solve your problem, but with quite a bit of additional markup.
A HTML file, created using Twitter Bootstrap - 3, with a header containing 4 columns. Here's the URL -
http://jsfiddle.net/anujbhai/nuHX6/.
Problem is, inside
#module_signup_header
even in big-screen where
.col-md-offset-1
should be working, instead
.col-sm-offset-1
is taking over the layout, which i think should only be viewed in screens less than 750px width.
..someone please help!! the 'offset' created for lower screen resolutions is being displayed on larger screen,
Below 768px, col-xs-width works not col-sm-width.
For more than 768px but less than 992px, col-sm-width works.
For more than 992px but less than 1200, col-md-works.
For more than 1200 px, col-lg works.
For 750px, col-xs should work but since it is not there, next col-sm is in work.
I'm actually experiencing a similar problem where an offset at the sm size carries over to the md size, even though I'm using their suggested md-offset-0 option. Maybe a push is not considered an offset?
But for your example I would add offset-0, giving you this
<div class="col-sm-x col-sm-offset-1 col-md-offset-1 col-md-offset-0">
I am building a site,that need to be scaled according to the browser size.Basically 2 rows of 3 columns. Left and right columns have picture and middle column have text in it.I gave percent to the left and right and they are doing well,but how to give text in the middle column same treatment so the it changes its size according to the browser size?
Depending on the browser, if you are targeting modern browsers that allow CSS3, you can use the css media queries:
<link href="grid-978.css" media="all and (min-width: 1002px) and (max-width: 1247px)" rel="stylesheet">
This code loads the selected css only for that interval of screeen sizes.
You can see an example here: http://978.gs/
Then what you could do is adapt the different content to the viewport you are dispaying (this means the effective screen size that has your page to show, including scrollbar).