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 hide sliding div with css

    How to change html background dynamically

    in slick slideshow, just want center slide to be active

    How To Layout a Grid in CSS

    How to vertically align text to the right of some text using css? [closed]

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How do I make an erasing animation in CSS? [closed]

    How to Style Unique CSS Navigation Menu

    How do I disable position:fixed in web pages?

    How to force firefox to use custom CSS for anchor tags that contain “#” or “javascript:”?

    How to have div horizontally scroll when resized.

    How to use a hover css pseudo to apply only to the top level element?

    How to make groups of divs the same width using only CSS?

    how to make animate.css(plugin) work instantly on live site load?

    css: how to target p a img

    How do I keep a span from being at the end of a line?

    Check this web optimization report - how can I fix it?

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    how to position div with css and force text to wrap around

    How to position boxes like a posterboard with CSS?

    how to apply CSS for @Html.DisplayFor?

    ckeditor - how to get custom-css with id to work?

    how to apply css property to my first div class only

    How to replace flex in this layout?

    How to implement two sets of CSS Tabs on one page?

    How to set the jquery draggable with margin left?

    How to center dropdown menu under parent tab?

    How to hide text behind image

    CSS: How to target all elements within a given ID

    CSS Transition not showing with directive