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
I have a codepen here.
https://codepen.io/Teeke/pen/JjprQgj
If I press F12 and check the mobile layout on liveview, the text appears correctly centered, and horizontal scroll is disabled.
https://codepen.io/Teeke/live/JjprQgj
On moving to code sandbox:
text is no longer correctly centered,
picture is incorrectly sized,
horizontal scrolling appears.
https://codesandbox.io/s/pensive-heyrovsky-3vmtj4
Mobile display is not working in the chrome devtools emulator:
https://3vmtj4.csb.app/
I’ve made sure to add all libraries, include autoprefixer, and normalize.css. Also included the correct meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries are all included.
#media screen and (max-width: 768px) and (min-width: 485px) {
form {
max-width: 70%;
}
}
Is there anything else I’ve missed?
I'm facing the problem with media queries on mobile devices.
I've got something like this:
#media screen and (min-device-width : 320px) and (max-device-width : 480px){
/* Some styles*/
}
I'm testing my website on Galaxy S6. In Firefox everything looks fine and styles do change but when i load the same website in Chrome - there's no change and it looks like the media query doesn't work.
Does Chrome need some special queries?
Add this meta tag into the header of your HTML file:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should solve your problem. Otherwise the browser might not resize because it will not accept that the screen size is meeting your media query criteria.
I had this issue as well and I thought it was related to #media queries nesting (that only Firefox currently implements). Since it was a foreign huge CSS file I was dealing with, I wasted a lot of time separating each and every rule into more restrictive queries (ranges with min, max, pixel-ratio and resolution)...
Later I found that after this line:
<meta name="viewport" content="width=device-width,initial-scale=1">
In another template there was another line with:
<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">
This was overriding the first rule and, with the exception of Firefox (mobile), it actually created a couple of problems:
all the media queries that had max-width under 639px were being ignored in Chrome (or the default Android browser);
queries with max-device-width syntax were also being ignored (only max-width ones worked).
So my suggestion is, before you head on checking all the problems in the CSS, have a look first at all the meta tags that may be affecting the viewport.
I'm new to this and not really understand why is this happening and how to solve this.
I'm building my web-site with #media queries to be mobile-friendly. When I'm accessing the site from mobile I see the mobile-friendly version as I should, but when I'm trying to switch for desktop-view, the mobile-friendly version is remained and the desktop(normal) isn't showing.
With my *.css file I did as following:
my styles for global(normal - desktop) view
...
...
...
#media (max-width:500px){
my styles for mobile-friendly view
}
I don't want to use #media for my desktop view as not all browsers support #media, just in case some one will think it may solve this problem.
Hope for your help
Always ensure you include the following <meta> tag within your <head> </head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
The viewport tag is used to serve your website in a certain style regardless of device. The width property controls the size of the viewport (the virtual "window") and can be set to a specific pixel size, or the width of the device. The initial-scale property controls the zoom level when the page is loaded. maximum-scale, minimum-scale, and user-scalable all control how users are allowed to zoom the page in out out.
I personally have disabled user-scalable to keep a consistent page view, like when a user focuses on a select element it ensures the page does not zoom. Let me know if this fixes your problem, otherwise I will need some example of your CSS to figure out your problem! Cheers ~
The only browsers that do not support media queries are IE 5 to 8. IE 9+ supports it. Less than 1% of my website views come from an Internet Explorer browser, so in my opinion I would not sacrifice a good design for IE. I would recommend to always code mobile first, and after implement size specifications.
Implementing the viewport in the head section of your page is a must.
<meta name="viewport" content="width=device-width, initial-scale=1">
I wouldn't use a max-width:500px since this is a random max width... Stick to the correct ones, and your CSS will look like this:
*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/
Enter all base code here
/*-- TABLET --*/
#media(min-width: 641px) {
...
}
/*-- SMALL DESKTOP --*/
#media(min-width: 768px) {
...
}
/*-- DESKTOP --*/
#media(min-width: 992px) {
...
}
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
#media(min-width: 1280px) {
...
}
Coding mobile-first CSS will simplify your code and create a solid style base. Switching your habits to mobile-first coding will be a plus for you and the designers that may eventually need to work with your layouts. This should be considered an effective method to help create bulletproof responsive designs.
I'm developing a site using WordPress. The site is centered and 1044 pixels wide. On desktop browsers everything works as expected, but when I check it on an iPad, the design is cut off on the right (using either iPad orientation) and I have to swipe to see it all.
http://oscarciutat.com/reciclar/home/
I added this CSS rule with no success:
body {
min-width: 1044px;
}
If I add the following meta tag the problem worsens:
<meta name="viewport" content="width=device-width" />
Any ideas about what I'm doing wrong here? Every solution I try doesn't work.
Thanks in advance
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- You can change the initial-scale to make it fit --->
Try using the above, that should make it work.
If not, you could use CSS media queries for the iPad screen resolution
#media (max-width: 1024px) {
YOUR CSS TO REDUCE WIDTH OF SITE
}
The iPad3 does indeed have a much higher resolution, but they all work with 1024x768 as viewport. Thats why it won't fit.
I used to start my work using html5-boilerplate instead of creating file from scratch. It is awesome for responsive web design.
I am developing a non-responsive website and client needs desktop version for mobiles too (remember how websites opens on mobile few years ago).
I did not make it responsive and do not add any styles in media queries.
I works fine on desktops but when we see the website on a mobile device(or less 940 px wide screens) it does not show complete backgrounds of full width containers(i.e. 100%) instead it only show the background according to width of device.
I am not sure but I think there is problem in following code which is meta viewport:
<meta name="viewport" content="width=device-width" />
I removed this code and test the website but problem remains. Can any one please tell me the solution?
Note: I have build the most of site and now I can not write markup from scratch.
I have found an easiest possible solution to this and its working for me. I just added following code into CSS file (my media query section of at bottom of main.css in case html boilerplate).
#media only screen and (max-width: 900px) {
/* Style adjustments for non responsive websites */
body{width:940px;}
}
Try changing it to the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Let me know if it works!