I could use media queries to specify a certain width for the different display styles (xs,sm,md,lg) but then I would have to repeat the widths that are part of the bootstrap media queries
#media (min-width: 768px) {
img {
width: 20%;
}
}
Question is: Can I maybe do this more DRY - without repeating the numbers?
My first thought was:
img.visible-xs {
width: 20%;
}
But apparently that class does not apply.
Any idea how to do this without using another set of media queries?
This can be done with less/sass mixins. E.g. with less just define
#screen-xs: ~"only screen and (max-width: 767px)";
#screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)";
#screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
#screen-lg: ~"only screen and (min-width: 1200px)";
and then you can use it like this
img {
#media #screen-xs {
width: 20%;
}
}
Related
AdminLTE 2.4.3 Demo: https://adminlte.io/themes/AdminLTE/index2.html
I'd like to collapse the left side bar but not the top nav bar when clicking the collapse icon.
I've played around with it but can't seem to find an easy solution for this. Because the collapse function is applied on the <body> tag, I'm not sure how to get around it.
For instance, I'd like it to collapse like this:
Add these styles
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
z-index: 1001;
position: relative;
color: white;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
display: none;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
display: block;
}
}
I am attempting to use the bootstrap carousel and started with example as shown here: http://getbootstrap.com/examples/carousel/
I have loaded test jpg (1200x480) into slides, but when you resize the browser, the images are shortened in the horizontal direction while maintaining the vertical size resulting in an increasingly distorted image as the browser is made smaller.
I've searched and found others with the same issue or some similar issue but no one has suggested anything that actually works.
Does anyone have a solution for maintaining the image aspect ratio for jpg in the bootstrap carousel?
you can resize the height of your carousel using css. this worked for me:
#media (max-width: 767px) {
.carousel .item {
height: 300px;
}
}
you can use #media to get the windowsize and set cssrules for each width using:
#media (max-width: 500px) { }
#media (min-width: 501px) and (max-width: 1000px) { }
#media (min-width: 1001px) { }
possibly you have to use it for your image-size, too.
I was commenting these code at bootstrap.css and my page is now not responsive. But my navbar still responsive. how to disable that?
/*#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}*/
Follow Bootstrap's official doc.
Bootstrap made a non-responsive.css template to disable responsiveness for your template. Take a look at this documentation: http://getbootstrap.com/getting-started/#disable-responsive
Example: http://getbootstrap.com/examples/non-responsive
But I see you want to do it your own way, so you could try this:
#media (min-width: 768px) {
.container, .navbar {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container, .navbar {
width: 970px !important;
}
}
#media (min-width: 1200px) {
.container, .navbar {
width: 1170px !important;
}
}
Note that the code above will only apply to the classes container and navbar. There are other components/classes that should have static widths and heights. So I would recommend you to take a look at the example above.
Must the Twitter Bootstrap breakpoints for media queries be used top down or bottom up and when to define max-width definitions - before or after the min-width definitions? I seem to not get the answer from the tb-stylesheet. When using these breakpoints with my own stylesheets it appears the ordering matters because i encouter definition extinctions or ignorance.
I required to take care for device withs < 768 (which is the last breakpoint for *-xs definitions). I must take care for withs 320px, 480px and 600px and am trying to construct a reliable processing order. These are my current definitions which appear to override each other at some point.
/* lg and up */
#media (min-width: 1200px)
/* md only */
#media (min-width: 992px) and (max-width: 1199px)
/* md and up */
#media (min-width: 992px)
/* sm only */
#media (min-width: 768px) and (max-width: 991px)
/* sm and up */
#media screen and (min-width: 768px)
/* xs only */
#media (min-width: 767px)
#media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
#media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
#media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
#media screen and (min-width: 320px)
#media screen and (max-width: 320px)
/* e.g. Blackberry */
#media screen and (max-width: 349px)
#media screen and (max-width: 479px)
#media screen and (max-width: 567px)
#media screen and (max-width: 991px)
Somebody can clarify the correct order to prevent definition extinction?
CSS cascade rules apply to media queries so, if you want to override a rule with a media query, you need to make sure that the media query contains a rule with the identical selectors (or selectors with more specificity) and that it is loaded after the rule you want to override.
Same applies when you have multiple media queries. The cascade order along with rules for specificity and inheritance will dictate whether the media query is applied. Take for example:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
Each of the selectors above are identical so they have the same specificity, but because of the cascade order, the background will never be the tomato color. If the body is 600 or more pixel wide, the rule for making the background tomato will be overridden by the last rule which also applies because 600px is also wider than 400px.
If you reorder the rules as follows:
body {
background-color: teal;
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
Now, the body background will be teal, when the body is less than 400px wide. It will be yellowgreen when the body is 400px - 599px and it will be tomato, when the background is 600px wide or greater.
Of course, you can use max-width too. For example, if you had the following order, the limit on the width at 599px for the yellowgreen rule would ensure that that rule didn't apply once the body was 600px or more:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) and (max-width: 599px) {
body {
background-color: yellowgreen;
}
}
So, for the TL;DR version, think mobile first. Organize your stylesheets with your base styles define for your smallest devices. Then order your media queries from the next smallest device sizes and up such that the largest devices you want to support are last.
And, don't forget to make sure that the rules in your media queries use selectors are identical to or have more specificity than the rule you want to override.
I want to create my web application responsive only for 2 type of displays.
For medium and smaller sized screens
For larger screens
Can I achieve this using bootstrap 3? I just want a fixed size container of 970px for all screens/devices having resolutions <= 1200px and for larger screens I want my container size 1170px
Take a look at bootstrap's container class declaration in grid.less
.container {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
The code is self explanatory, you can make a custom built on their site.