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
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.
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 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.
Hi guys I hope there are someone that can give a solution for this:
When coding a responsive website I get the problem when the screen turns on a ipad it don't reset the zoom meaning that when users turn to vertical it will zoom in and you have to reload the page or zoom out to see the full design is there a way to force a reset on the zoom or reload when users turn the screen. I pref if the solution comes in css becuase it's only on ipad device the problem is and I can control this in the .ccs fil assignt to devices
I know there has been some questions about this but nothing of that I could use becuase I'm not trying to block that users can zoom in or out but I'm trying to reset the zoom on screen turn
Best regards
Lasse
Add the following meta tag in your HTML code (Inside head tag)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />