simple question.
I'd like to set the css property of a class, say the container's padding-top, to different values depending if I am on a xs device or on a sm device.
Any suggestions?
Sorry for the basic question.
You can use CSS media queries. Bootstrap includes media queries for specific device "breakpoints" (http://getbootstrap.com/css/#grid-media-queries) so you would override like this..
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
.container {
padding-top:20px;
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: 992px) {
.container {
padding-top:40px;
}
}
Demo: http://bootply.com/NLOH2yNKnM
Related
`#media screen and (max-width: 768px) {
.my-element {
font-size: 16px;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
.my-element {
font-size: 18px;
}
}
#media screen and (min-width: 1024px) {
.my-element {
font-size: 20px;
}
}`
I was expecting the font size of .my-element to adjust based on the screen size, but it doesn't seem to be working. What am I doing wrong?"
Make sure that the .my-element class is being applied to the correct element in your HTML. If it's not, the font size won't adjust as expected.
Check that there are no other styles elsewhere in your CSS that might be overriding the font size changes made by the media queries.
Try adding the !important declaration to the font-size property in each media query to ensure that it takes priority over other styles. However, it's generally not recommended to use !important unless it's necessary to do so.
Verify that your browser window size is within the range specified by one of the media queries. If it's not, the font size won't adjust until the screen size meets the criteria of one of the media queries.
I'm using Bootstrap 3 and trying to remove/exclude the breakpoint between medium and large devices. I have a existing website which is optimised to 970px which looks great. What I am trying to do is remove the md > lg breakpoint so that even on large widescreen desktops the maximum body width is 970px and still centred.
Anyone know if there is a quickfix solution to this?
Any advice would be much appreciated
Decbrad
If you're overriding the bootstrap breakpoint (and using containers properly), adding this below the bootstrap breakpoint media queries in the bootstrap CSS file should work for you.
If using LESS
#media (min-width: #screen-lg) {
.container {
width: 970px;
}
}
OR, you can simply override the bootstrap container in your own CSS (just make sure you load it after bootstrap.css)
#media (min-width: 970px) and (max-width: 2500px) {
.container {
width: 970px;
}
}
OR you can find the media query in the bootstrap.css file on around line 1240 and simply change it there
#media (min-width: 1200px) {
.container {
width: 1170px; /* change 1170 to 970 */
}
}
the less way is good but this one is more flexible and reliable:
#media (min-width: #screen-sm) { .container { width:#screen-md; } }
Because in bootstraps default values the width of #screen-md is 992px.
Now you will just have a breakpoint for small devices (smartphones) and any other bigger devices. they will all get the same layout
You can set a max width on the containers:
.container-fluid,
.container {
// Disable large-desktop breakpoint.
max-width: $container-md;
}
No need for media queries or anything.
The $container-md value is typically 970px, unless you changed the $grid-gutter-width. For LESS, replace the $ of variables with an #. For regular CSS, replace the variable with the hard coded pixel size.
I try to switch the display mode via javascript.
Assuming i have the html element with a class "display_mobile" i tried:
#media only screen and (max-width: 767px), html.display_mobile {
/* mobile mode definitions */
}
but this does not works.
Any idea how to solve this?
Like this. Media queries do not allow to use selectors in condition.
#media only screen and (max-width: 767px) {
html.display_mobile .any-definition {}
}
I'm trying to make the move to being a Responsive developer (instead of a fixed one). I've been trying to understand media queries as of late and having some confusion. The test is simple:
I want to change the body background color to red for mobile, yellow for tablets, green for wide screens. The following code demonstrates this (for the most part). The issue I'm having is when the width drops below 480px (30em's), the background reverts back to its default css (background turns red to white). Now.., my small mind tells me "ohh I'll just make a
#media only screen and (min-width:1em) { body { background:red;} }
... that will fix the problem!"
This however seems wrong and unintuitive. Does anyone know the proper way to achieve this simple task?
/*
==========================================================================
MOBILE (min-width 480px)
========================================================================== */
#media only screen and (min-width: 30em) {
body { background:red; font-size:.75em; }
}
/*
==========================================================================
TABLETS (min-width 768px)
========================================================================== */
#media only screen and (min-width: 48em) {
body { background:yellow; font-size:.85em; }
}
/*
==========================================================================
SCREENS (min-width 1140px)
========================================================================== */
#media only screen and (min-width: 71.25em) {
body { background:green; font-size:1em; }
}
If I were you, I'll revert the whole CSS into a max-width. Something like max-width: XX is a smartphone, max-width: YY is a tablet, else is a screen. So, it'll turn into something like this:
body { background:green; font-size:1em; }
#media only screen and (max-width: 71.25em) {
body { background:yellow; font-size:.85em; }
}
#media only screen and (max-width: 48em) {
body { background:red; font-size:.75em; }
}
I'm testing my one page site on my Galaxy S3 (1280x720 px) and I can't seem to figure out what to have for max-width. I looked it up and couldn't find a current answer—-most clear answers were from "pre-retina". (Or should they still work..?)
With pixels devices changing so rapidly, is there any way to just target media query by device's orientatino?
Media queries also have an "orientation" feature which you can use in the query to detect portrait or landscape modes. The correct media query for your situation would be:
#media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
/* insert styles here */
}
As a side note, I made a handy media query building tool with optional device presets (the one I used here is listed as "Galaxy Nexus, landscape") if you ever need to figure out other valid media queries: http://arcsec.ca/media-query-builder/
/* 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 */
}
There are plenty more, check out http://css-tricks.com/snippets/css/media-queries-for-standard-devices/