I am using dream weaver to create a responsive about me page for my site (using the default about me template). When I use the dream weaver on-device previewing system, the page is fully responsive and on my iPhone it resizes perfectly fine to look like this:
However, when I upload the code to the website, the page no longer becomes responsive. It simply looks the same as it does on my laptop (as shown below)
Why is this issue occurring?
The html page is this. If you need me to post the code here as well, please tell me. Your help is much appreciated :)
For media queries to work on small screens, you need to include the viewport meta element in the head of your document. E.g.:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I'm running Facebook Ads for one of my clients, however, his website is quite old and there are a few pages that aren't being responsive in mobile version. I know basic HTML & CSS, enough to do simple coding but am not sure where to start with this issue.
Issue: The linked pages are below with images attached. In mobile version the main content div is basically only taking up three quarters of the screen. The rest of the client's pages are fine (occupy the whole screen) when on mobile.
http://stkildafitnesstrainer.com.au/our-trainers.html
http://stkildafitnesstrainer.com.au/services.html
Thanks for your help
Edit:
Seeing the comments below, and as I was too young to care about disabilities. I'm sorry, this is the new answer:
Simple, add this in your head:
<meta name="viewport" content="initial-scale=1">
initial-scale, as the name says, define which scale your website will be rendered.
There is also other parameters to the content tag:
width=device-width sets the <body> width to be the same of the device, just like height=device-height is the same for height.
user-scalable=no, this says you are not able to zoom the page AND IT'S NOT RECOMMENDED, you can also set this parameter to yes.
I'm building an application and by far the weakest part of my game is Style and Design. But, I'm having one particular problem at the moment. I'm trying to make my dashboard responsive but when I look at the dashboard as an iphone 6 with my chrome inspector the screen zooms out really far and everything breaks... Here is a screen shot of what I mean.
See how the content is really far away... I really don't know how to fix this? Any idea what I could be doing wrong?
Please try to add this to your HTML's <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Reference: w3schools
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 recently developed a website using bootstrap 3 and it looked fine on my browser,i am using firefox and tried the responsive design layout in the developers tool and the website works fine all the nav-menus works great but when i uploded it for test and tried it with a mobile phone using multiple browsers but it doesnt look how it is suppose to look ,the nav-manus didnt shrink to the collapsible button so does anyone seem to know the problem ?any comment is help full thanks. I know i am suppose to post some codes but the code is a lot to be posted.
Write this code in the head if you didn't
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I tried searching for the better part of three days, but maybe I'm not asking my question right so I decided to try here.
I'm currently developing a website that I feel looks amazing, however on the iPad it's zoomed in with a ratio of 1 to 1 from the start. I cannot for the life of me figure out what is causing this problem. On other websites that I built the iPad simply scales the view to fit into its viewing area. But sadly that is not the case for this.
Here is the website currently
I'm developing on Wordpress, using the Genesis Framework. Can someone please lend a hand?
You should use the Viewport meta tag to specify how you want your website to behave on different screens:
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
It's the viewport meta tag that does this. Here's the one you are using:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/>