I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Related
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm
Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.
I've manipulated viewport contents
Display width and #media but the solution eludes me.
Again I'm new but committed so thanks in advance.
You can configure your file by using this CSS
#media only screen and (max-width: 720px) {
body {
background-color: lightblue;
margin: 0px;
}
}
The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps
The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:
#media screen and (min-width: 1000px)
Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.
Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.
When i view my site on my iphone, it all looks as i planned but however when i resize my browser to check css changes quicker, i can't see the media query making any effect on it.
My responsive design part of my CSS starts off as:
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
/*style*/
}
I then have the following in my head tag along with linking the stylesheet
<meta name="viewport" content="width=device-width, user-scalable=no">
Can anyone help me out here? Thanks - www.joewinfield.net/portfolio
Use min-width in the media query instead of min-device-width. The same goes for max-device-widthof course.
The min-device-width refers to the display's resolution (eg. the 1024 from 1024x768), while min-width refers to the width of the browser itself.
It is generally a better approach to use min-width instead of min-device-width.
What's the best way of simply 'shrinking' a site to fit on to an iPad, while making it fully responsive when it comes to mobiles?
Here's my viewport tag:
<meta name="viewport" content="width=device-width">
I had hoped that the following media query would enable the whole 1060px wrapper div to be displayed by forcing the device to 'zoom out' thus displaying all, like a mini version of the desktop display
#wrapper {
background: green;
margin: 0 auto;
width: 1060px;
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body { min-width: 1080px; }
wrapper { background: red; }
}
The media query itself works (wrapper background turns red on iPad), but I still need to zoom out to view the whole page.
However, if I change to my viewport tag to:
<meta name="viewport" content="width=1080px">
I get the desired result, but this is no good since the mobile version needs to be fully responsive. So am hoping there's something I can add to the media query to achieve it.
Sure I'm missing something very obvious here - and seem to remember this technique working in the past - any help appreciated!
Many thanks in advance!
EDIT:
It seems this has been raised before, same issue, and yet no solution:
How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?
I've just completed a mobile site for a client, and I've mainly focused on the website's lightness and responsiveness. I haven't worked on redirecting the website because it's still a work in progress BUT all the vital components have been done.
Now if you view the website in your computer and resize your browser, you'll see how it changes according to the viewport's width. But I tried viewing it in my smartphone (Samsung Galaxy S2) and I end up seeing the whole website squished into the available viewport.
Why is this happening and what do I do to make it work?
Thank you very much for your time!
Mobile browsers won't know what to do unless you specifically instruct them.
The viewport metatag is essential when designing responsive layouts. To fix this problem, simply add the following tag to your website's <head>:
<meta name="viewport" content="width=device-width">
If you feel that you need to zoom out a tiny bit more (I personally prefer this), you can also make some small tweaks to get a cool look:
<meta name="viewport" content="width=device-width, initial-scale=0.7">
Have fun,
Adam.
Check your CSS. You haven't closed your curly brace. or you have typo error.
/* =Responsive: Small screen to tablet & IPAD
-------------------------------------------------------------- */
#media (min-width: 768px) and (max-width: 991px) {
.navbar .nav li a {
padding-right: 5px;
pading-left: 5px;
}
example css.