I'm building the site for a desktop with the CSS below for an element. . .
.give-donation-level-btn {
font-size: 16px;
When I apply the media query for mobile, it controls the desktop style as well.
#media screen and (max-width: 767px) {
.give-donation-level-btn {
font-size: .9rem !important;
}
With the !important declaration for the query, I thought that style would be applied only to screens ≤. What am I missing?
You're missing out a curly bracket.
#media screen and (max-width: 767px) {
.give-donation-level-btn {
font-size: .9rem !important;
}
}
Don't worry, this only happens to the best programmers ;).
I hope this solves the problem.
It looks like device-width was the culprit. max-device-width worked, though I'm uncertain why.
Related
https://staging-digemaya.kinsta.cloud/membership/
I have removed the div's using
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
however, they still display on tablet and mobile. I have searched everywhere and nothing is working.
I used the inspector tools on your site, and it looks like there's a media query being applied to those styles. Try moving
.page-id-16713 .cta-2-banner-2 {
display: none
}
.page-id-16713 .quotes-wrapper {
display: none
}
to the top of the stylesheet instead of the bottom and see if this fixes the issue.
For future reference, you should try to keep your #media queries at the bottom of your CSS. You can read more on this here
It appears that the css you shared is not in a media query when quickly looking through the html from your site, however the browser inspector tool shows that it's in a media query (2x):
#media screen and (min-width: 768px)
#media screen and (min-width: 768px)
.page-id-16713 .cta-2-banner-2 {
display: none;
}
This means there might be invalid css somewhere before this property that is causing trouble. Browsers try to make sense of these things and that's why it's in a media query. I recommend a w3c validator or taking all your css into your code editor and combing through it.
The quickest fix (although not the recommended cause the real invalid issue should be resolved to prevent future trouble):
#media only screen and (max-width: 40em) {
.page-id-16713 .cta-2-banner-2,
.page-id-16713 .quotes-wrapper {
display: none
}
}
I learned about media queries and learned that there should be major breakpoints for layout dramatic changes and minor breakpoints for things like paddings and font-size.
but is it okay to declare multiple media queries for each section of the page?
for example: three for the navigation and three for each section of main content
I think this would be better than changing the whole layout on 4 or 5 media queries.
why not, I do sometimes.. e.g.
#media (max-width: 600px){
body {
background: green;
}
}
#media (max-width: 500px){
body {
background: red;
}
}
#media (max-width: 400px){
body {
background: blue;
}
}
DEMO
In my opinion it is different for every site. If it works on your site and it isn't too complex than why not? There are no 'rules' that apply to every site. Some people don't like to use it, so they don't. And some do like it thus use it.
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 am not entirely sure of the best way to place declarations such as
#media screen and (max-width: 600px) {
//
}
in my stylesheet. If, for example, I have a block of rules pertaining to some element (say, the sidebar) and I want to include some responsive rules with it, then it is tempting to insert the above code along with all the other rules for the sidebar. But then I might have some other element (say, the header) that also needs to change in some way when the screen width is below 600px. Then I'll end up with several #media screen and (max-width: 600px) declarations scattered up and down my CSS file. But it makes more sense- to me- to prioritize grouping together CSS rules according to the HTML elements they control.
So can I do this? Is there a negative performance impact from having
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
}
#media screen and (max-width: 600px) {
.header {
font-size: 16px;
}
}
rather than
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
.header {
font-size: 16px;
}
}
?
There is no notable loss of performance using several media queries instead of only one. However, if
you resize or zoom-in/out your browser, there can be a peak of memory and CPU load.
You will not resize your browser, but partially-sighted users needs to zoom your website, etc.
You should consider using a CSS Preprocessor like Less, SASS, or Stylus. A media query can be placed as a CSS property in your rule:
// app.less
#max-width: 600px;
.sidebar {
background: #2c2c2c;
#media screen and (max-width: #max-width) {
font-size: 12px;
}
}
If you can't use a CSS Preprocessor, then don't duplicate your media queries because of maintenance nightmare.
I think it would just bulk up your css file size, but if you minify it, you should be fine. It is best practice though to accomplish as much as you can in as little code as possible.
I added #media screen css in an effort to change my website but it doesn't seem to be responding. I added meta name = "viewport" content="width=1200, width=device-width" to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect.
#media screen
and (max-device-width: 768px)
and (orientation: portrait) {
body {
max-width: 600px;
}
#sidebar {
width: 0;
}
}
#media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
So how do I:
Get this to work, is my CSS wrong?
Is there a way to specifically get rid of the #sidebar in #media screen css?
Try This (Not Tested)
#media handheld and (orientation: landscape),
screen and (max-width: 1000px) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
It is possible that an old version of your CSS file (before your changes) has been cached by your phone. If you have PHP, a nice way to get around this is:
<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">
That way, the stylesheet is only redownloaded when it needs to be.
If you don't have PHP, you can always just change the ?ver= paramater by hand each time you make a change in your CSS file.
This may or may not be your problem, I don't know. But it might help.
Code looks alright to me. Have you tried to do a hard refresh?
shft + f5 to my experiences fixes CSS when you don't notice a setting applied. Also deleting the cache helps too!
Also to get rid of #sidebar
#sidebar{
display:none;
}
will hide it when you hit your #media.
Hope that helps :)
#media works for everything. e.g my phone has a width of 720px for eg. when you have CSS #media for mobile at 720px; the following CSS will apply if that makes sense. Should read on mobile first responsive design if that's what you're trying to achieve, but that's a whole different topic. As for the code in your #media, you are targeting mobile devices, not laptops/computers. Incase you're not aware of that. so if I'm thinking right the CSS will apply only to mobile devices. For laptops/pc, #media (max-width: xxxpx) {} would do it :)
Thank you to Akira Dawson for the display portion. It appears that I needed to get rid of content="width=1200" for it to display properly on my iPhone. In addition what I ultimately did was got rid of #media screen and changed it to #media handheld for it to take effect on my iPhone. For whatever reason #media screen would not work. It's interesting because I was told #media handheld doesn't work on the iPhone but apparently it does.
As far as I understand it content="width=1200 says that your site needs a viewport of at least 1200px which is contrary to max-device-width: 768px
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> should probably fix your problem.
source: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag