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 :)
Related
I've been stuck on the following problem for a while now.
#media screen and (min-width: 414px) and (max-width: 600px) {
/* appropriate code */
}
#media screen and (min-width: 601px) and (max-width: 767px) {
/* appropriate code */
}
The issue I have is that when a screen is on the specific width of 767px, no styling is applied. What really confuses me is that on the other hand the specific width of 600px does work, while both are the max-width value of their respective media query. I have had this issue with other similar media queries but decided to simply provide you with those two to make my problem clear. I have tried out several things (verifying zoom value of browser, trying on different browser) but it doesn't seem to work. At first I thought it might be a bug but it's a recuring problem. Do any of you have an idea as to what might be the problem?
It's working correctly on my side. But for more accuracy, you can use decimal values like so.
/* 414 -> 413.7 600 -> 600.3 */
#media screen and (min-width: 413.7px) and (max-width: 600.3px) {
div {
color: red;
}
}
/* 601 -> 600.7 767 -> 767.3 */
#media screen and (min-width: 600.7px) and (max-width: 767.3px) {
div {
color: blue;
}
}
<div>Hello</div>
When min-width is used, it means the lowest width and styles are set for the higher width
When max-width is used, it means the maximum width and styles are set for the width less than that
When both are used, styles are applied when the width between the values is entered
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
I'll describe the issue first then show how my media queries are setup.
The issue is that at exactly 978px wide, media queries are being ignored.
Here's what my site looks like at 977px wide
And here's at 978px wide
The background image disappears. The background image is being set with media queries so that it can load smaller images on smaller devices.
Here's the code (SCSS):
//Desktop
#include desktop {
background: $header-desktop-img;
}
//Tablet
#include tablet {
background: $header-tablet-img;
}
And here are the media queries being used for desktop and tablet:
$break-desktop: 978px;
//Desktop
#mixin desktop {
#media (min-width: #{$break-desktop + 1}) {
#content;
}
}
//Tablet
#mixin tablet {
#media ((max-width: #{$break-desktop}) {
#content;
}
}
As far as I understand, media queries are inclusive, so there shouldn't be a gap in the media queries, but for some reason there is.
If anyone has an idea how to fix this issue, please let me know.
If your browser is zoomed (as in 90%, 110%), this can cause rounding issues in certain cases which may be what you are experiencing. However, even if this is not the case, I would generally advise against using both min and max-width queries, and to instead go with a mobile-first approach. That is, to begin by writing the base styles to apply for the smallest possible screen, and then write only min-width queries that overwrite the previous breakpoints. In this approach, you are guaranteed not to have any gaps in your queries. For instance,
.some-selector {
width: 100%;
#media screen and (min-width: 768px) {
text-align: center;
}
#media screen and (min-width: 992px) {
width: 50%;
text-align: left;
}
}
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.
Website I've been working on just started ignoring all media queries. I can't seem to find the problem.
http://fnd.instinctdigitalmedia.com/
On the homepage the images under the 'Browse our Products" section shoud change based on screen width. at 320px, 480px, and 768px screen width it still shows the originals.
You must target the ancestor or parent to override what the previous query has done.
From 760px to override its style rule you should add call the parent #content of the img to override the rule in 760px
Example:
#content > img {width:25%;}
}
#media screen and (max-width : 480px){
#content > img {width:50%;}
}
#media screen and (max-width : 760px){
img {width:100%;}
}
There's a few issues I can see. Firstly, media queries aren't firing because:
There's a closing parenthese missing on line 899, flipping an error. To find this, I added my own media query showing something obvious, and pasted it at the top of the CSS, then further and further down until it stopped working.
Also, the mobile view failed because you are missing 'and' in your media query:
#media only screen (min-width: 320px) and (max-width: 480px) {}
It should be:
#media only screen and (min-width: 320px) and (max-width: 480px) {
As for the width break itself, a handy trick with responsive designs is to limit this kind of issue from ever occurring before you even start styling (this is a rough guide, not a comprehensive list):
img, video, object, iframe, fieldset, table, form, article, section, header, nav, footer {
max-width:100% !important;
}
Even when respecifying the widths of your images, you are still using pixel widths instead of a relative measurement like percentages. This means the images will stay a static size and won't resize correctly to the screen no matter what.
Lastly, you are using a 'bracketed' approach for your media queries. This means rather than allowing your existing CSS to cascade down your media queries, saving you having to specify things twice that aren't going to change, you must repeat the same code many times.
For example, you currently have:
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.product-cat-1 {
position: relative;
display: block;
margin: 0 auto 10px auto;
width: 430px;
height: 150px;
background-image: url('http://localhost/firstnations/wp-content/uploads/2014/04/home-lighting.jpg');
}
}
Anything below 768px must be specified all over again. This leads to massive amounts of repeated code, and a lot of extra work for you. The simpler approach would be:
#media only screen and (max-width: 1024px) {
/* all styles for under 1024px */
}
Then for anything smaller:
#media only screen and (max-width: 768px) {
/* only styles that need to change when under 768px wide */
}