My mobile media queries dont work in landscape mode, maybe I am not displaying media only screen right. I am not using any frameworks , just regular CSS...
Could someone point me in the right direction? Thanks in advance
this is what I have right now
#media (min-width : 319px) and (max-width: 480px){
//css here
}
not sure what I am doing wrong
There is a useful attribute/function in CSS called orientation which has two options:
Landscape
Portrait
And this is how you can use it:
#media screen and (orientation:landscape) {
/* Your CSS Here*/
}
To attach the screen max and min width you can do something like this:
#media screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 480px) {
/* Your CSS Here*/
}
See this reference: css expanding based on portrait or landscape screen size? and also a documentation about the #media queries on this page: https://css-tricks.com/snippets/css/media-queries-for-standard-devices
I hope this will help you :-)
What about this combination of media-query + viewport height ?
video {
width: 100%;
}
#media screen and (orientation:landscape) {
video {
height: calc(100vh - 110px);
}
}
100vh = 100% of your viewport height.
110px is the height of my navigation bar, (just need to adapt it to your dimensions)
Related
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
I'm using Bootstrap with lots of media queries for responsive design. For a given div, I start using bootstrap's col to set width and margin:
<div class="col-xs-6 col-xs-offset-3" id="special">
But in certain cases and in certain cases only, I want to further add my own styling, as below:
#media only screen and (orientation:landscape) and (min-width : 320px) {
.special {
width:40%;
}
}
#media only screen and (orientation:landscape) and (min-width : 768px) {
.special {
width:"go back to using bootstrap col";
}
}
My problem as you can see from the above, is that as the media query builds, on the next size up, I'm not sure how to say... go back to using the bootstrap col. I tried width:auto and width:initial but those did not work
It generally a bad idea to alter dimension when you are using a grid system, because that's all grid system is build for.
Simply by reading your example is a little unclear because there are couple conditions in your code:
width > 320
width > 768
width between 320 ~ 768
orientation is landscape
orientation is not landscape
However, media query is and additional expression for your selector, it will use what you already have if YOU DO NOT SPECIFY the OTHERWISE. so for example
/* from bootstrap */
.col-xs-6 {
width: 10 % ;
}
/* your override */
#media only screen and(orientation: landscape) and(max-width: 768px) {
#special {
width: 40%;
}
}
By applying this, div will have width of 40% when device is landscape + width is less then 768px (sorry i can't tell your intention by reading your code), it use col-xs-6 or col-xs-offset-3 otherwise.
Merge them both into one media rule
#media only screen and (orientation:landscape) and (min-width : 320px) and (max-width : 768px) {
.special {
width:40%;
}
}
Like this:
#media only screen and (min-device-width: 320px) and (max-device-height: 768px) and (orientation : landscape)
I have a bar that spans across the page (100% width) with a child container inside of it that spans 80% of the parent container's width.
I have the following CSS media query that is supposed to increase the child container's width from 80% to 100%:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%;
}
}
However, using the dimensions given to me by my chrome developer tools, the query is taking affect at a width of 990px. Not 900px. This is occurring with all my media queries; they are all activating 80-100px earlier than they should be. Anyone know what might be causing this?
This is formatted wrong.
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar{
.container{
width: 100%;
}
}
}
should be:
#media screen and (max-width: 900px), screen and (max-device-width: 900px){
#imagebar .container{
width: 100%; }
If you want to call on an element inside another element, dont open both elements, just specify which element in which parent you want to edit or change.
You can try like this it will work for you
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
your css here
}
I've been reading a lot about RWD and really wanted to give it a go so I have a website to build for a friend and thought it would be a good tester. I watched a video on YouTube that said if you were starting from scratch building a site and want it to be responsive, build it from the smallest viewport then scale it up as you go a long, so this is what I am doing.
However, my first CSS media query:
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {
background: #000;
}
Once the device / browser reaches a min width of 480px and I want the background to go black (purely for testing purposes) it doesn't seem to respond.
Here is the code for my website: http://jsfiddle.net/F6Xbp/
Originally I did have a media statement that said:
#media only screen and (max-width: 479px) {
}
This was where I began building the website, but i removed this as I thought that as each viewport is recognised, the styles would be over-ridden so I could use the max-width: 479px as my base starting point.
I look forward to hearing some replies and no doubt I'm overlooking something so simple here.
Keith :-)
Updated jsFiddle
You need to put the code you want to change within the #media queries and makes sure they don't overlap each other (or are at least positioned in sequence to where it doesn't matter if they are). As you had it the bottom most media query was overriding most of the others
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
body {
background: #000;
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {
background: red;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {
background: green;
}
}
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (min-width: 959px) {
body {
background: blue;
}
}
I made it work: http://jsfiddle.net/F6Xbp/1/
Technique 1
#media screen and (max-width: 480px) {
body { background-color:black; }
}
Technique 2
#media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
body { background-color:black; }
}
For the difference between max-width and max-device-width, see this.
I've literally wasted the entire day trying to figure this out.
When I resize my browser to anything of lesser width than 778px, the screen goes black. (any height works, just width doesn't configure)
What i would like to do is add a mobile #media setting that actually displays what I currently have!
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
any ideas what's wrong with my code? I've been rain-man'ing through my css..
Code: http://jsfiddle.net/jwrg5/
Much appreciated!
Here is a clinical example for applying media queries (Fiddle):
#media (max-width: 480px) {
body {
background: red;
}
}
#media (min-width: 481px) {
body {
background: blue;
}
}
The stylesheet functions as follows:
When your viewport is wider than 480 pixels, blue background is rendered
Narrower viewports are rendered red.
Note that there is a difference between using max-width and max-device-width. The latter gives you the maximum device width, which does not allow you to as easily test your queries by resizing your browser window.