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.
Related
I'm getting some weird behaviour that I'm not sure why it's happening.
I'm building out an site. When running this locally in Chrome and Safari, it displays fine, everything adjusts as you'd expect. However, in responsive mode, and when viewed directly on mobile, the entire site is scaling down in size to fit. By this I mean the entire site every element all reducing in size to to be shown as it looks at desktop size.
I'm using Bourbon/Neat, with a bit of flexbox here and there, which I have done many a times before. I've just never experienced this. Any ideas?
You likely need to add
<meta name="viewport" content="width=device-width, initial-scale=1">
to the <head> section of your html
Jordan's answer is in the right direction but it didn't work for me.
There is another post here on Stackoverflow that has a more comprehensive meta tag, that fixed it for me:
Small fonts in mobile website
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.
juniorgoldreport.com is the website I'm working on and it's made in wordpress.
I'm using this plugin specifically - http://shiftnav.io/free/
The plugin for mobile nav bar is incredible, I enjoy it's functionallity and ease of use greatly.
It has a setting to set when to show the toolbar, I chose to show it at 960px. The only change that I have done to it.
When I resize my desktop window, the navbar apears (I haven't done the necessary changes to remove the header and old nav when making the new one apear). So far so great.
The issue is, on mobile view, the navbar doesnt apear. I'm going to assume the plugin is using
#media (max-width:960)
vs
#media on screen and (max-device-width:960)
But I'm not totally sure. Anyone have any idea's as to why it's happening?
EDIT - images to get you a better understanding.
The nav bar when a desktop window is rezied - it apears (yay)
The nav bar DOES NOT apear on mobile devices though - I'm not sure why
In short: your site is not actually responsive, because the viewport meta tag is missing, so the site displays at a 960px width on mobile devices. Since that is above the breakpoint, the menu does not display.
The issue is this typo in your site head:
<meta name"Keywords" content="Gold reports resource stock news and top gold articles"
<meta name="viewport" content="width=device-width">
The Keywords meta has two syntax errors a missing '=' after 'name', and a lack of closing >
As a result, the viewport tag is never read by the browser, so it has no effect. Without the viewport tag, the viewport is displayed scaled on a mobile device, rather than responsively. Since the mobile viewport is displayed at 960px width, the media query does not apply, and the menu remains hidden as it would on a desktop screen.
Fix the syntax errors in the first meta tag and the issue is resolved.
<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">
Hope that helps
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 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>