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
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">
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.
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.
When I view my website on a mobile screen of iphone there is a white space on the right side of the screen and I can't figure out what is causing it. It seems to be only in the header section too.
Any suggestions?
Thanks.
URL
I see your site and i think that your site is work fine in browser but it create a problem with mobile your site is fully responsive and there not any white space in desktop resize but your media query not work in mobile so put this meta tag in your head tag and check again in mobile
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
try to add
margin:o;
if you post your code, i can provide you the accurate answer and one more thing not every one have IPhone lol :)
I recently built a "responsive" webpage with bootstrap. The weird thing is when I check the different resolutions on my computer I can see that the page is truly responsive. When I checked it on my phone the text was small, the navigation menu didn't change to its responsive mode. When i minimize the browser window to the resolution of a phone it works perfectly.
(By the way i checked it on my Gallaxy S3 and WP8, I'm pretty sure the problem is in all mobile devices). I came a cross something called viewport, but its quite hard to understand how to use it.
Can someone help with this problem? How can i fix it?
Thank you all in advance!
Add this to your html:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>