I'm working on a small project based on Boostrap 3 (html5boilerplate custom build) and trying to use the "official" media queries in the boostrap documentation:
/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg) { ... }
For some reason the media queries doesn't seem to exist (#screen-sm, screen-md, screen-lg), I'm searching for this in the bootstrap files but can't find any references.
My example code (main.css):
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm) {
.header-btn {display: none;}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md) {
.slogan {display: none;}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg) {}
Basically what happening is... nothing!
I get those errors in Chrome:
http://i.solidfiles.net/0d0ce2d2a7.png
Any ideas?
The bootstrap documentation is a little unclear.
Using these #... parameters for min-width is in fact less syntax, not CSS.
You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 768px).
And then when click the Compile button in the bottom, the less code is compiled to CSS. this compilation will replace all occurrences of #screen-sm with 768px, and the same for the other parameters.
#adonbajrami: I think you need to add #import "myStyle.less" in the bottom of the bootstrap.less file.
The file bootstrap.less imports variables.less.
Including your file in the same parent file will give your file myStyle.less access to the variables declared in variables.less.
(Sorry for not commenting in place, but I'm not yet able to.)
Related
I've been testing Bootstrap LESS 3.1.1 a bit and found that on making the site responsive some styles don't look that well when the page is large and when it's small, etc.
So I was trying to make some changes like adding a font-weight:bold to some element or more padding or aligning it to the left, etc. just because I like the columns to collapse into one column when the screen is "xs" but that changes the layout so much I need to redefine some of the styles.
I am using custom styles and combining them with Bootstrap LESS using mixings etc. and I was wondering if there is a way of saying "do this when small" or "do this when medium". I know I have the media queries but unless I have a "#media #small" or similar it just won't fit with bootstrap as it should, and even if I go that way, I still feel like Bootstrap may already include some mixing to do that.
Does anyone know a good way to do this?
Cheers.
I think the answer may be this as it's at Bootstrap documentation:
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
Even so, I would like to wait and see if there is any other way, but it looks like this is it (as it uses Bootstrap variables it will always fit).
I use Bootstrap 3 to create a tabbed search box like the one in the demo* I provide. I would like to make it responsive for the mobile version as well.
Specifically, when you resize the widow and the ul reaches the end of the form, the li items would stack 3 by 3 at some breakpoint and then as it gets narrower all of them will be stacked.
*Here is the demo: http://jsfiddle.net/hvS43/2/
**An example can be seen here: http://library.nd.edu/
I'm not seeing the "Head" section of your HTML, but I'd first check to make sure the following line is in it:
<meta name="viewport" content="width=device-width, initial-scale=1">
try using col-xs-6 in the li class.... Then use #media queries to style the tabs like you want. Let me know if this helps
You need to write media-query for the tabs like this eg:
#media (min-width:768px){
.nav-tabs>li>{width:50%;}
}
And write for the other view-ports, here is the bootstrap media-queries..
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want the mobile styles interfering with the desktop presentation at all. I have played around with countless media queries, but the result either the mobile styles are getting displayed on the desktop, or the mobile styles are displaying only on mobile devices but with only one set of rules (non-responsive). Is there a way I can keep the two completely separate?
My code I have right now goes like this:
/* regular desktop styles */
#media only screen
and (max-device-width: 600px)
{ ... }
/* mobile only styles when the device is 0-600px in maximum width */
#media only screen
and (max-device-width: 1000px)
{ ... }
/* mobile only styles when the device is up to 1000px in maximum width */
Why not use a media query range.
I'm currently working on a responsive layout for my employer and the ranges I'm using are as follows:
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes I'm using:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (i.e. 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %.
What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.
There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.
The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.
To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.
I had to solve a similar problem--I wanted certain styles to only apply to mobile devices in landscape mode. Essentially the fonts and line spacing looked fine in every other context, so I just needed the one exception for mobile landscape. This media query worked perfectly:
#media all and (max-width: 600px) and (orientation:landscape)
{
/* styles here */
}
Yes, this can be done via javascript feature detection ( or browser detection , e.g. Modernizr ) . Then, use yepnope.js to load required resources ( JS and/or CSS )
I have been working for a while now with responsive design, and twitter's bootstrap seems to be one of the best responsive frameworks.
But I have a question regarding the media queries. I see in their documentation the following :
/* Landscape phones and down */
#media (max-width: 480px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Large desktop */
#media (min-width: 1200px) { ... }
And as I'm already testing it, between the 979px and 1200px the layout has no styles so everything will be messed up. So I don't understand the logic in there, could someone explain me please ?
It is supposed that width between 980px an 1199px is default and don't uses special media queries. So, you define all your styles for that width and after that, you justify your styles for other, "non-standard", screens.