I would like to create a full width header image that changes in size by percentage according to device.
It is an incremental zooming-like effect upon one image instead of having to use separate ones of different pixel sizes.
Please refer to media queries below which are positioned at the end of my CSS.
What is the best way to code this in CSS and HTML. I have tried a number of approaches with no success. I am working in Dreamweaver.
It is taking days to figure out. This seems a lot harder than it should be.
#media only screen and (max-width: 992px) {
.header {
max-width: 125%;
}
#media only screen and (max-width: 768px) {
.header {
max-width: 150%;
}
}
#media only screen and (max-width: 567px) {
.header {
max-width: 200%;
}
}
Related
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.
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.
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%;
}
}
this works for video, not for the images. do you know some better query?
#media (max-device-width: 1024px)
and (min-device-width: 600px)
and (orientation: landscape) { ... }
If you want video, images, other media to behave responsively you will need to add in
video, embed, object, iframe, img {
width: 100%;
max-width: 100%;
}
Also to ensure that your video sizes proportionally you should check out http://fitvidsjs.com/