I have added some css media queries but it doesn't seem to make any change, I mean I have added this code
#media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference, am i missing something here ? do i have to add something more than this in my css to make it work ?
below given is my default css for both classes
.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
My advice would be to test the code in a real mobile phone not with a browser if that's what you are doing cause browsers behave differently
Another important thing you must do is add meta view port tag without that it won't work like the one given below
<meta name="viewport" content="width=device-width, initial-scale=1" />
Remove !important from your default css use css specificity instead if its really necessary so your default css should be
.leftSideBar{display:block;}
.rightSideBar{display:block;}
if even that doesn't work you have to show us your entire css or html to identify the problem
Everything looks fine in your code.
Try with this meta in your html :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, if I can give you a little advice, try the mobile first way. It looks like this :
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
#media screen and (min-width:640px) {
/*design for screen-width >= 640px */
}
This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;)
here is a little / great tutorial on mobile first approach :
http://www.html5rocks.com/en/mobile/responsivedesign/
Good luck and give your html and full css if it's still not working.
The min-width and !important are probably useless. The query is fine, but it may be shortned to just:
#media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}
Should be working either way. Are you sure the html is fine? You may want to show that here as well.
This code is the best for mobile friendly responsive web:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Related
I can't get my CSS media queries to work. I've worked with them in the past and they worked for me, but on this particular site, they don't function. I added <meta name="viewport" content="width=device-width, initial-scale=1"> but it still doesn't work. this is my HTML and this is my only CSS media query #media and screen ( max-width: 700px ) {.header-image {display: none;}} Do you see a mistake somewhere? I'm pretty sure it will be something totally minor, but I spent hours trying to make it work and haven't been successful so far. Thanks a lot:)
The syntax of your code is wrong
This is the valid media query
#media screen and ( max-width: 700px ) { ... }
So the situation is a little bit weird because there are alot of questions already been asked on media queries but unfornulately I couldn't find my way in most of them. Actually I am working on a simple website and I wrote a media which looks like this.And notice that sass also notifies me that no grid-area have been specified for the grid-template-areas present in the media whereas I specified it out of the media on top.And just for a precision my media is at the bottom of my code.
#media (max-width: 769px) {
.top-container {
grid-template-areas:
"showcase showcase"
"top-box-a top-box-b";
background-color: green;
}
}
but it doesn't work,even with the meta Tag and the viewport specified.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Thanks...
This problem is occuring in iphones only. I checked it in an iphone 5(landscape mode) and iphone 4s(landscape mode).
Here's a link to the video
I tried specifying the font size but it didn't work.
Looks like iphones auto resize the text and to avoid that I used this:
body { -webkit-text-size-adjust: 100%; }
or
body {-webkit-text-size-adjust: none; } /* works perfectly in landscape mode */
For future users: If you're having issues similar to this in firefox, you can try to fix it with this.
body { moz-text-size-adjust:100%; }
So after a couple of hours of searching SO I found out that mobile Safari does try to adapt content so that it's readable on screen by default - it has different default styles to other browsers.
I don't know the exact rules - but when it comes to font sizes, it seems to work like this:
Text inside a paragraph, list item, or other 'text' element: Apply the author's style without adapting.
Text inside a DIV or other non-specific element: Treat as 'plain text' and 'adapt' the size according to Mobile Safari's rules.
So - the short answer is, wrap your text in a paragraph, and apply the font-size rule to that.
SOURCE
I think you can simply fix with this meta tag , try to add this to your html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It worked before but all of a sudden it stopped working :(
#media only screen and (max-width: 768px) {
form,
button,
input {
width: 80vw !important;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
I have html, css and js code included in the link below:
DEMO: CodePen
The problem is an invisible special character inserted into your code.
It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.
If you copy and paste the code into Notepad, you'll see it.
In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)
The simple solution is to just delete that media query and re-type it.
I am modifying my CSS3/HTML5 site to work with different Medial Queries.
The site pages are in the Root directory. The CSS files are within a folder in the root directory called css.
Within the HEAD tags of my page, I have one CSS file for the default stuff and then I have another one for iPad in an external CSS file called ipad.css
When I am in the Developer Tools within Google Chrome, it doesn't seem to be applying the rules within the ipad.css file. I know this because I am wanting to change the text size of an element and it is not changing. Nothing is happening.
This is what I have within the HEAD tags:
<link rel="stylesheet" type="text/css" href="css/default.css" title="Default Styles">
<link rel="stylesheet" type="text/css" href="css/ipad.css" media="screen and (max-device-width: 768px)" title="iPad Styles">
According to the Google Chrome Developer Tools, an iPad width is 768px. I have referenced this within the link tag. Any ideas or suggestions welcome.
Use max-width: 768px rather than max-device-width: 768px.
Also, remember to specify a viewport meta tag in the head section of your html.
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, you might want to check
What is the difference between max-device-width and max-width for mobile web?
Also, keep in my you're not targeting devices, you're targeting resolutions.
Another possible source of your problem might be that you are using less specific selectors in your ipad.css. Don't forget that the styles from your default.css are also used on resolutions lower than 769px!
To test this, put this css rule on the very top of your ipad.css:
* { display: none !important; }
If your site vanishes then, your stylesheet is loaded and applied.
I tried the max-width as well and the style isn't applying. Even if I change the font-color of the text within the div class (p tag), nothing is happening.
As an example, I have a div class called banner-textoverlay so, in my ipad.css file, I wrote the following to see if it would change the text color and nothing happens at all.
.banner-textoverlay p {
font-color:#000000;
}