I'm new in CSS and I'm creating a responsive design with media queries.
When I change the size of the browser to 480px or less (#media only screen and (max-device-width: 480px)) the design work fine but when I open it on mobile or use the toggle device toolbar on chrome, it goes too small and I didn't get the same design as on desktop with small window
Is there something missing (another media query or something else) to make the design on mobile the same as on small window in desktop.
Thank you in advance
Could you try adding this to your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
My guess is the zoom is your problem. Either that, or the actual resolution of your phone might be higher than 480px in width.
The line of code I pasted is part of Bootstrap, which is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. (quote from their website. I don't disagree though).
I suggest taking a look at bootstrap as it's made with media queries and is really thought for responsive websites.
Related
I know this technology is OLD, but I never understood how it was done.
Back in the days, before websites were responsive. Pages would just shrink all the way down and look like the full desktop display on mobile devices. Just smaller.
How do you do that? I want my website to just shrink down. But be the same throughout all media sizes.
How do you do that?
You do nothing.
That's how devices with small physical displays behave when given a webpage that doesn't explicitly state it has support for small viewports by opting-in with meta viewport.
You can use this one to view the same webpage allover screens.
<meta name="viewport" content="width=YOURCONTAINERWIDTH">
Eg:
<meta name="viewport" content="width=1200">
I've created a test site. I've used media queries in css but when I load the page on mobile, I don't see the mobile version and when I re-size the browser the site is responsive. I've read at multiple places to not to use *-device-width. So, what am I missing? What could be the resolution?
Add this to the head of your website:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will set the width of your page to follow the screen width of your device.
It was my mistake. I used javascript to override meta tag and it was causing issue in proper responsiveness. Fixed javascript.
So, I'm developing the website and it works well on PC screen but doesn't work on mobile screen.
At first time website looked as 'before changes on mobile'
I thought the problem with size of main picture and changed the size from 700x700px to 500x500px. I changed the width of div with the description(below) from 1200px to 900px as well. And after that website looked as 'on mobile screen'. As you can see,changes didn't help. The white line remained in the right side of mobile screen. I don't have any ideas how to solve this problem.
Have you tried optimizing the view using the following code?
<meta name="viewport" content="width=device-width, initial-scale=1">
Perhaps you should also try repsonsive design frameworks like Bootstrap.
So I'm working on this new design for this website: www.descola.org.
I was working on my localhost and it was all great, and I was very careful to have a nice view on mobile screens.
But when I uploaded the new design to the server and opened on my phone, things were not as they should be displayed on "XS" screens. They are being shown as on "SM" screens. For instance, the navbar isn't collapsing and the images are shown beside the product descriptions instead of above them.
You can take a look at it here: www.descola.org/dev
Anyone have a clue on what am I missing here?
Cheers,
Sorry about the lack of details in the question. But I've figured it out.
Since the previous website wasn't responsive, these two statements wasn't in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
Now it works!
Cheers,
What is the screen resolution of your phone? Your phone could have a physically small screen but with a reasonable resolution that is higher than 'XS'. So the fact that your phone is a mobile device does not automatically mean that it is an 'XS' device in fact it can be an 'SM' device
Cheers
I have been trying to figure this issue all day and haven't got it yet:
I want to have these 3 css files:
lowerThan960pxForDesktop.css (for fluid layout)
MobileLandscape.css (iphone 960px android 800px etc.)
MobilePortrait.css (iphone 640px android 480px etc.)
I want that the Lanscape.css will use the desktop.css
I want that the Portrait.css will use both the desktop.cssand the Landscape.css
how should my HTML should look like in order to get that right - using media queries or javascript. I have gone over through this a lot of time and each time something goes wrong (either the desktop gets the mobile.css or either the iphone read the Portrait.css even that it is in landscape mode etc.).
maybe the Iphone problem is related to the known viewport width problem? solved with adding this to the html.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
besides that use media queries to call the css. and in the css file call #import to call the referring css file (e.g landscape would #import desktop etc)
media queries 101:
<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >
and more information about the rich world of media queries here.
also adviced to use conditional IE comments to hide the media queries from older IE and let it use just one kind of css
edit: ah I now understand the problem - you need to use different css in different Iphone situations.. you could use jquery mobile and bind a css class change acording to the change from portrait to landscape and back.
hope this helps