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;
}
}
Related
I'm working on my portfolio for responsiveness on mobile using scss. I tried to use padding or overflow: hidden; it's not working and I also tried to overwrite it using(!important), it's still not working. It's not taking any properties at all for this media query. but takes property for larger screen #media screen and (max-width: 950px) when I inspect from chrome browser. What do you think might be a solution to this problem?
I tried to use padding or overflow: hidden; it's not working and I also tried to overwrite it using(!important) and the justify-content:unset; it's still not working. I'm expecting it to take the property of the smaller screen. mobile size of 390 * 844, like iphone 12pro A51/71
here is what I've tried for smaller screen:
#media screen and (max-width: 400px) {
.about-container {
padding-top: 2.5rem;
}
.controls {
overflow: hidden !important;
justify-content: center !important;
}
}
but on inspection, it's not taking the properties and i tried other browser, it's still the same.
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'm new to WordPress and CSS; currently creating a WordPress site and on the last stretch. I need to figure out a way to override the current padding on desktop and laptop sized browsers, as the elements are stuck in the middle with padding on either side on mobile devices.
I've tried to create my own CSS but it's not working (im rubbish) so I'm hoping some experts can help. I tried this below-
#media all and (max-width : 780px) {
.column{
padding-left:0px;
padding-right:0px;
}
}
The webpage I'm testing it on is https://www.xordium.co.uk/your-cloud-journey/
Thanks!
#media only screen and (max-width: 600px) {
.vc_custom_1528804063483 {
padding-left: 20px !important;
}
}
simply put this in your style.css file with the width you have set your width as i write 600 for example.
Hope this will work for you.
I'm trying to figure out how to remove the image if the browser height is larger than 1080 pixels. For example android devices would have more than 1080 when the page loads and my image is loaded and it goes down to about 2/3 of the page and the rest of it is blank. I would rather it be gone entirely. How can I get rid of it. Here is how I am setting it:
body {
font-family: Helvetica;
font-size: 1.8rem;
background-color: #000;
margin: 0 auto;
background-image: url("../images/myimage.jpg");
background-repeat:no-repeat;
background-position:center top;
background-position:no-repeat;
background-attachment:fixed;
}
what I tried
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
Try a media query!
/* standard*/
#media screen and (min-height: 1080px) {
body {
background-image: none;
}
}
/* orientation */
#media device and (orientation: portrait) and (min-height: 1080px) {
body {
background-image: none;
}
}
You will want to use a media query here, but you want to focus on max-height (not width... which is what media queries typically focus on, eg, http://unmatchedstyle.com/news/height-based-media-queries.php)
#media screen and ( min-height: 1080px ){
body { background-image: none; }
}
You should probably spend a bit of time learning about mobile responsive design in general, specifically because the media queries can come in handy with problems like yours. This is a very good place to start reading about them: http://alistapart.com/article/responsive-web-design/
Also note that certain JS plugins (eg Backstretch for example) stretch your image to whatever the background size happens to be... that might be another thing to look into, if you are interested.
Give the element containing the background image an id attribute then use that id attribute to assign the style to the background using an if statement with JavaScript.
<script>
var element = document.getElementById("elementHoldingTheBackground");
if (1080 < window.innerHeight ) { // returns a number
element.style.display="none"; // hides the element with CSS
}
</script>
That's the most simple way from the top of my head but I'm sure there are better ways to do it!
I'm also no expert. Please don't cook me over this. I'm only 18. I'm new to this!
Please tell me what you think.
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.