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.
Related
My supervisor at the university asked me to update her website and I found that when I made the browser smaller, a horizontal scroll bar would appear but the right side of the website gets covered with the background. If I open the website on my phone then the right side is just missing. I would at least like to fix the issue with the smaller browser size.
I do not have a lot of html experience; I was only going to update the information. I do not know who wrote the code for the website but would like to fix the issue for my supervisor.
I looked at the code and I do not know what the issue is. I have tried some solutions that were posted on stackoverflow for seemingly similar questions, and nothing has worked.
I am wondering if someone is able to look at the code and potentially identify the issue? This is the website: https://people.trentu.ca/~joannafreeland/index.html
Thank you in advance!
Maria
Or try this:
#media screen (max-width:400px) {
}
Write this on CSS and between curly brackets you can write a code. The code is actives only, when the screen wide is lower, than 400px.
try to put this in the <head> of your code :
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1.0, minimum-scale=1.0, maximum-scale=1.0">
width=device-width
means, we are telling to the browser “my website adapts to your device width”.
This means that the browser will (probably) render the width of the page at the width of its own screen.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
This won't make your page completely responsive, but maybe you can try adding
width: 100%;
in the rules under your html, body?
That should help with the cutting off issue. Hope this helps?
EnhancedLoop7
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 am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.
But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.
Could anyone point out what I am doing wrong?
Add this to your HTML head..
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
<meta name="viewport" content="initial-scale=1">
would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.
Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:
If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.
Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.
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">
I'm trying to fix some pages on my web design and ran into an issue where the sidebar banner ads that look fine on my regular desktop browser seemed to display "off the screen" on the iPhone and Android devices. The issue seemed to go away by setting the viewport meta tag to a higher value (e.g. 1300). While no side-effects have been found yet I was curious if setting the tag to that high a value was indicative of a bigger design issue?
<meta name="viewport" content="width=1300" />
You should be using this meta tag:
<meta name="viewport" content="width=device-width">
Since if you are viewing your site on a mobile device, for example, your website will be tiny and unviewable.
<meta name="viewport" content="width=1300" />
What your meta tag does is to say to the browser,
"No matter the width of the screen this website is on (viewport width)
render it as though it were a 1300px wide screen."
What that will do is "zoom out" if your viewport is less than 1300px and "zoom in" if the viewport is greater than 1300px.
Now, it sounds to me that if you are using this to fix your layout, you have bigger problems. I highly recommend you to look into bootstrap as a way to make your layout responsive. Bootstrap is a library of css files that you add to your site to do quite a few things, one of which is to create a fluid, responsive grid system.
I recommend starting here to learn about bootstrap and what it can do and then google search some articles. Everyone loves it! Trust me, once you realize how simple it can make your life, you will love it too.
http://twitter.github.com/bootstrap/index.html