I'm working on a UI in CSS and I'd like to apply different styling when device is turned horizontally or vertically. I know that it probably can be achieved using media queries, but I don't know the specific keyword (if there's some)
I've thought about somehow calculate and use max-width and max-height in the queries, but I didn't come up with a working solution.
In the example I'll use just some basic code:
#menu {
display: grid;
}
#media only screen and (max-width: 600px) { /* This is just an example to not break the code, I'd like to have there something like: max-width: device-height */
display: flex;
}
I hope it's understandable, I'll be really happy for any help :)
#media screen and (orientation: portrait) {
-----Horizontal-----------------
}
#media screen and (orientation: landscape) {
-----Vertical-----------------
}
For more information : https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
Related
I've been trying to create some responsive hiding classes in CSS, only to realize that my #media queries are behaving very weirdly around breakpoints.
What I want to create
I want to create two classes, that have the following functionality:
.hidden-sm should be hidden when the viewport width is less than 768px
.hidden-md should be hidden when the viewport width is greater than or equal to 768px
What I have tried so far
My original solution was the following:
#media screen and (max-width: 767px) {
.hidden-sm { display: none !important; }
}
#media screen and (max-width: 1279px) and (min-width: 768px) {
.hidden-md { display: none !important; }
}
However, this code ends up showing both .hidden-sm and .hidden-md (or hiding none of them if you prefer) at exactly 768px.
Another thing I tried was this:
#media screen and (max-width: 768px) {
.hidden-sm { display: none !important; }
}
#media screen and (max-width: 1279px) and (min-width: 768px) {
.hidden-md { display: none !important; }
}
But this one ended up hiding both .hidden-sm and .hidden-md at exactly 768px.
I think I have a pretty decent grasp of #media queries, but this specific problem is confusing to me. I would appreciate a working solution, as well as an explanation of why these solutions don't work as expected.
P.S. I know !important is not the best practice, but I think it's quite necessary for my specific needs, which might not be obvious in this example.
Update: For whatever odd reason, if I change the first piece of code to 768px and 769px respectively, it works, only the breakpoint is one pixel after the desired one. Why?
I can't really replicate your issue so I've rewritten the media queries in a simple format to check that the logic works.
I'm not using a max width and a min width, just using one (as it's all that's needed in most cases)
#media(max-width: 767px){
body {
background-color: red;
}
}
#media(min-width: 768px){
body {
background-color: green;
}
}
Which can also be tested here - https://jsfiddle.net/3dLyhr8c/
The fact this works across my devices I can only assume that you have an issue with your browser zoom or similar :)
I had been trying to hide an element with CSS, without success
I have this code:
#media only screen and (max-width: 1180px)
.element {display:none!important;}
}
I'm trying to instead of being 1180px it will be width 60%
#media only screen and (max-width: 60%)
.element {display:none!important;}
}
i had being trying to make it work, but i had being a few days and i just give up and decide to loop for help on the community, i know I'm missing something...
Do you require the only in your Media Query? See What is the difference between "screen" and "only screen" in media queries?
#media screen and (max-width: 1180px)
.element {
display: none !important;
}
}
If your issue persists, please can you provide more information about your problem as there is not enough to work from in this snippet.
I'm building a basic web App using PhoneGap for a local company. I have created two images for the header/banner at the top of the App. One is optimised for portrait orientation and one is optimised for landscape.
I want to be able to show either one depending which way the device is held. I have been reading about media queries and frankly its a little bit over complicated for my needs, as JQuery mobile will take care of rest of the functionality for me, and I'm only using one CSS for the whole App.
Does anyone have a few simple lines of code I can add to help solve this issue?
You can use CSS media queries for portrait and landscape orientations, it is not complicated at all:
#media screen and (orientation: portrait) { ... }
#media screen and (orientation: landscape) { ... }
Using these media queries you can override background-image for any orientation.
Official documentation: http://www.w3.org/TR/css3-mediaqueries/#orientation
There are two ways of using it:
Presume you have <div> with class header:
#media screen and (orientation: portrait)
{
div.header { background-image:url(image1.jpg); }
}
#media screen and (orientation: landscape)
{
div.header { background-image:url(image2.jpg); }
}
Alternatively, you may wish to use <img> tags. In this case you will need two of them, and hide/show only one with CSS rules. Let's say, <img> tags have classes header-land and header-portrait respectively:
#media screen and (orientation: portrait)
{
.header-land { display:none; }
.header-portrait { display:inline-block; }
}
#media screen and (orientation: landscape)
{
.header-land { display:inline-block; }
.header-portrait { display:none; }
}
This is an answer about how to use media query, it's a quite easy way to solve the issue. But one prerequisite is that it's ok to show the images as css backgrounds, and not as <img ... />
Pseudo code
.my-banner {
...declarations like:
background-position:
border:
margin:
padding:
}
#media all and (max-width: 320px) {
.my-banner {
background-image: url(portrait.png);
}
#media all and (min-width: 321px) {
.my-banner {
background-image: url(landscape.png);
}
I have been using and learning CSS3 a fair bit of late and enjoying its many capabilities. Right now I am wondering if it is possible to setup a CSS rule that assigns a block element width conditionally. The sort of thing I am after - if the screenwidth is less than, say 500px, use a width of 320px otherwise use a width of, say, 80%, of screen size.
Yes, I realize I could do this sort of thing through JavaScript - just wondering if there isn't a more elegant CSS3 approach.
Yes, it is very much possible using CSS media queries - http://www.css3.info/preview/media-queries/
.mydiv {
width: 80%; /* normal case */
}
/* special case if screen width < 500 */
#media all and (max-width: 500px) {
.mydiv {
width: 320px;
}
}
#media only screen and (max-width: 500px) {
// CSS rules go here
}
#media only screen and (min-width: 501px) and (max-width: 959px) {
// CSS rules go here
}
#media only screen and (min-width: 960px) {
// CSS rules go here
}
etc...
From the W3C
new to css3 media queries and responsive design.
I would like to know how to show something (say a div) on small screens only but not on large screens.
I've tried something like:
#media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...
and anything larger has eg:
#media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
it doesn't seem to work as intended.
might be worth pointing out that i'm using bootstrap 2.0
It's a better practice to make all your default style mobile-friendly and then use min- media queries to size up:
div { /*put whatever your default styles are first*/ }
/* Then use the media query to hide it at 481 and wider */
#media all and (min-width:481px) {
div { display:none }
}
Look at 320andup and Skeleton and the CSS of this page for examples. Look at the helper classes towards the bottom of this CSS for differences between invisible/hidden etc.
You can put this first
/* for small screens, only execute in if statement */
#media only screen and (min-width : 320px) and (max-width : 768px) {
.smallOnly {
visibility:visible!important;
display:block!important;
}}
Then at the bottom of it put it for large screens (always execute since not in if statement)
.smallOnly {
visibility: none;
display: none;}
The important tg makes it so that anything with important always overwrite everything else and it will be the master rule regardless of where it is in the file.