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
}
}
Related
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.
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've got a quite strange error and I seriously can't figure out what I did wrong.
Currently I am working on a responsive website project with media queries.
After weeks of working I just realized that my media queries are not working in Safari but everywhere else.
Some examples of my CSS
#media (max-width: 1138px) {
.column-2 {max-width: 32.4%;}
}
#media (max-width: 950px) {
.column-2, .column-1 {
max-width: 17.9%;border-left:1px solid #e5e5e5;
}
}
#media (max-width: 640px) {
.column-2, .column-1 {
max-width:100%;
border-bottom:1px solid #e5e5e5;
height:20%;
width: 91%;
}
footer div.left, footer div.right {
width:100% !important;
}
}
Viewport Added in HTML head section
<meta name="viewport" content="width=device-width, initial-scale=1">
I've also tried with #media screen only and (...) {}. Still not working.
Any ideas what I'm doing wrong?
Your first breakpoint is missing the closing bracket after "max-width: 32.4%".
I'm not sure if this is the fix but it looks like you're missing a closing bracket after "32.4%" and possibly the "screen" part of your media query. You're not defining the range of what the media query handles. Here's a sample of a media query I wrote on a website I did (http://bonjourproject.com/):
#media screen and (max-width: 600px) {
.bottom {
width: 400px;
}
}
be sure to add "screen and" and see if that works for you.
Note: "screen" is not the only option here there are many more to choose from, but "screen" is pretty common. Let me know if this works!
Without seeing the full stack of your css/html there are many possibilities why this is happening but since its working on the other browsers and not iOS go and try adding this just to test and see if Safari picks it up:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
If still nothing then you need to check you html head syntax and css tag make sure there is no typo...try using console. This will at least help me/everyone figure what other steps you need. and as I mentioned try adding something basic in fiddle for us.
I have copied some media query code from elsewhere which works absolutely fine, but when incorporating into my own project, it doesn't seem to work.
I've looked at previous stackoverflow questions, and tried implementing the fixes or tests such as,
checking whether the media query is working by applying an unwanted background color, which fails. I've also made sure to add the viewport metatag.
Here is my media query
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
body { margin: 5px; width: 5px; }
.testimonial {
background-color: black;
}
}
The live page can be seen here (click on testimonials, and then click on a picture): http://krmmalik.com/me/
update: Just spoke to a colleague and he seems to think that the reason the media queries are not working is because the testimonials content is being loaded in an iframe at which point the media detection doesn't take place?
I tried this and it work perfectly.
why would you set the body width to 5px, if the max-width should be 479px?
#media screen and (max-width: 479px){
body {
margin: 5px;
}
.testimonial {
background-color: #000;
}
}