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).
Related
I have past experience of working with foundation. So I started using foundation media queries rules for creating responsive site.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Here is my problem:
I am trying to hide a menubar in mobiles that is shown in desktop version (like how show-for-small in foundation). So I have defined stylings for mobile inside the media query #media only screen and (max-width: 40em). Surprisingly it is not working . So I have added the following rule before the above mentioned rule, #media only screen { }, then it worked.
I also tried the combination of #media only screen and (min-width:5 em) and (max-width: 40em). It also did not work.
I also have viewport meta tag defined in my page. Can anyone explain me why this is happening so ???
i think the problem maybe related to css specificity ( one command has higher priority)
so what about trying to put
#media only screen and (max-width: 40em)
in the last of your commands
and also inspect element in browser to know if this command is overwrited by other command
this is the most things happen with me when works with bootstrap ,wish this help you
You have to give your element the hide-for-small class so that it won't show up on mobile screens: Know as visibility classes
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.)
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.
There are a lot different media queries for mobile screen sizes. It can be overwhelming to accomodate all of them when designing a responsive mobile site. Which are the most important ones to use when designing for mobile? I found this article that does a pretty good job of outlining the available media queries: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
I'd recommend taking after Twitter's Bootstrap with just these four media queries:
/* 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) { ... }
Edit: The original answer (above) was taken from Bootstrap version 2. Bootstrap has since changed their media queries in version 3. Notice that is there is no explicit query for devices smaller than 768px. This practice is sometimes called mobile-first. Everything outside of any media query is applied to all devices. Everything inside a media query block extends and overrides what is available globally as well as styles for all smaller devices. Think of it as progressive enhancement for responsive design.
/* 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: 768px) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: 1200px) { ... }
Check it out on Bootstrap 3's docs.
Design in percentages and initially optimized for a 15"+ screen.
Review what components you want to see on a phone - just keep essential content and remove elements that don't work or clutter the small screen. These styles can be contained within #media (max-width: 480px) { ... }
As things move to 10" or less, redesign your buttons and interactive components for fingers rather than mouse. #media (max-width: 767px) { ... }
Shrink the width of your browser. When things don't look so good, get in to the console and figure out what styles can be changed or items that need to be redesigned or removed. Mark what screen width they occur at and create a media query.
At the end, review your media queries to see if some of them can be grouped together (ie if you have one at 750 and 767 pixels width, you might just as well with combining them in the 767).
If you are comfortable w jQuery you can add
$(window).resize(function(){
console.log($(window).width());
});
to get the current screen size. Add a few extra pixels for good measure.
The first Twitter Bootstrap code referenced by #cjlarose assumes that you've built your main CSS for a display that is between 980px and 1200px wide, so you're essentially starting with the desktop design and adapting all of the others from it.
I'm glad to see Twitter has changed to "mobile first" in Bootstrap 3. It's one of the most popular approaches to media queries, and the way I prefer to do it. You start from the smallest size rather than from the desktop out.
Note that your particular site may need different queries than what are listed there or on any other list. You should add queries as your content demands, not based on any set template.
Here are some media queries I've found most useful. These are just some examples:
/* Start with baseline CSS, for the smallest browsers.
Sometimes I put this into a separate css file and load it first.
These are the "mobile first" styles. */
...
/* Then progressively add bigger sizes from small to large */
/* Smartphones start somewhere around here */
#media (min-width: 300px) {
}
/* You might do landscape phones here if your content seems to need it */
#media (min-width: 450px) {
}
/* Starting into tablets somewhere in here */
#media (min-width: 600px) {
}
/* Perhaps bigger tablets */
#media (min-width: 750px) {
}
/* Desktop screen or landscape tablet */
#media (min-width: 900px) {
}
/* A bit bigger if you need some adjustments around here */
#media (min-width: 1100px) {
}
/* Widescreens */
#media (min-width: 1500px) {
}
The most important thing is that you may not need all of these, or you might want to change the numbers depending on what your content looks like. I don't think there are any really hard rules about how many or where to put your breakpoints. I'm doing a site right now that happens to only need one breakpoint because the content is pretty simple, but I've also done sites that look more like the code above.
I didn't include the retina display code. That's useful if you're switching out normal-resolution images for high-resolution images on hi-res displays, but otherwise it's not really that useful.
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.