How to make a webpage mobile friendly with css media queries


Tags: html,css,responsive-design,media-queries

Problem :

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;}


Solution :

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


    CSS Howto..

    How to override CSS Background that already has !important?

    how to add multiple images to a css header?

    How to create inheritance with LESS?

    How to change the background-color of jumbrotron?

    How to create a custom scrollbar on a div (Facebook style)

    How to use icon fonts

    CSS Styles How to make this table not fill the entire page width?

    How to prevent the vertical scroll of this div?

    How to set the maximum height of CSS tables?

    How to functionalize countdown?

    How to preserve css class name through GWT compilation?

    How does this site hide the iframe scrollbar?

    How to align div objects in rows

    Custom CSS Form: How to achieve responsive underlined textarea?

    How to fix CSS wide layout issue?

    In CSS/JS, how to word-wrap at every nth word?

    css - how to fix first td in table on top if the second td has multiline?

    does anyone know how to do this css transition? [closed]

    How to have a css element with transitions except initially?

    how do I select second submit button to imply other color

    How to limit height of div when part of 2 vertical divs in fixed parent div

    How to prioritize a CSS class?

    Stack row 2x2 on Bootstrap using rows in same height… how?

    How to get span to be only as wide as the image inside of it?

    How can I use CSS to add a blank column between paired column groupings?

    How to check the visibility property with javascript

    How to split the image using Javascript + CSS?

    How to create a css hoverover box with two section

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    How can I force a cached css file to be reloaded on a JSP (i.e. not PHP)?