I'm trying the code below; but it wont work. My content's width renders about just right in my Android Incredible, and I think it renders across pretty well in iPhone (Think, I am using online emulators for iPhone view, but should be)
<meta name="viewport" content="width=320, initial-scale=1">
But the grey #999 background is still causing a horizontal scroll - and seems to not be adapting like everything else. How can I close that extra space in background created by the body { ??
It looks like the content in your page is causing the horizontal scroll. Once you get the page too narrow, the youtube video and images cause the scroll.
Related
The site I created makes an unnecessary large width on the page. The page is supposed to fit to the screen of a mobile phone. But I seem to have to scroll to the right for nothing. This is the site: https://gwenlotest.000webhostapp.com/index.html
it works perfectly on big screens but as soon as I open the site on mobile websites I have to scroll to get to the burger menu and I don't understand why.
It is caused because of the elements that animate from the right. Look into putting them in another div that wraps these elements. The div will should have 100% width.
As you might notice, as you scroll down, when the elements animate from the right edge of the screen, the right extension disappears.
Add shrink-to-fit=no to your meta name="viewport" so it should be in the form
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
i think that should fix the issue.
I've a page with a sidebar setup with bootstrap. When I reduce the width of the page in my browser, the sidebar goes from FULL -> COLLAPSED -> TOPBAR (meant for small screens like phones) as the width decreased
But strangely when I access this in my phone, I only see the COLLAPSED version of the sidebar whereas on that small a screen I should be seeing the TOPBAR.
I can't understand how to debug this since it works correctly in my PCs browser on reducing the width!
Any wise CSS heads here who might know what the problem might be? You can check out the sample page here.
Please add below meta tag to recognizance device without this tag this responsive design not work in mobile : Add between <head> tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I was testing a website: This Website
When I stumbled upon the following problem. everything looks correct in all browsers I tesded on my computer (IE, Chrome, Safari, Firefox etc...) but When I test this website on iPad, in safari browser I get strange margin at the right side, I can't show a screenshot, but in a nutshell image all website page like you see it on computer, but shifted to the left side (so there is blank space on the right side). Can anyone suggest what is causing this?
EDIT:
I noticed that this margin is somehow affected by margin of arrows that you can see on the sides (used to list through slides). Styles of the buttons have following id's
#prevslide and #nextslide
EDIT2:
As code is very long, I will post links to stylesheets used in website here.
Slideshow stylesheets, #prevslide, #nextslide style rules can be found in second stylesheet
Style1
Style2
And main stylesheet I use to style how website looks, however I dont think that the problem lies within it.
Main Style
It looks like your problem is because of the combination of % and pixels in your css.
For example, your .header wrapper is set to 100%, but the .in-header inside it is set to 1020px. This is fine as long as your browser window is wider than 1020px, but when it shrinks, .header is sizing itself in relation to the browser window, and .in-header isn't.
Set the min-width property on your body element so it won't ever reduce below the size of your main page elements:
body {
min-width: 1020px;
}
You'll need to set a meta tag in the header for the ipad (and mobile):
<meta name="viewport" content="width=device-width" />
This instructs the browser to set the page body to match the tablet size. I'm not 100% sure this is the exact setting you want, but I don't have my iPad handy to test; whatever the solution, it lies in this tag.
'Sup Stack!
So I've been getting to grips with the viewport meta tag and how it adjusts pages to fit to the devices viewport. I've had some help from stackoverflow earlier here:
Footer will not extend to 100% width on iphone, why?
mainly my concern was that my footer for my website wouldn't extend to 100% width. You can visit the website here:
http://gloryillustration.com/
And you can see my iphone solution here:
http://gloryillustration.com/tests/test13.html
where i managed to sort the webpage to display properly on iphone, by using:
<meta name="viewport" content="width=device-width, initial-scale=0">
And if you were to view this on the ipad the footer is displaying 100% width, but the entire page is now displaying as though its zoomed waaaaay out and its adding tons of white space to the right left of the page and under the footer as well. I take it that the website is adjusting itself as though it is being viewed on an iphone. But im not sure why it's adjusting like that? I would think that the content="device-width" would set the width to that of the device its being viewed on? Or have i misunderstood this completely.
Is there a way to set a viewport meta tag to encompass both ipads and iphones for this website?
Any help much appreciated!
Use this instead:
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
You can see the result in play here http://www.premiumdw.com/case-studies/convert-a-960-grid-website-to-a-responsive-design/.
try initial-scale=1 instead of 0
for you wanna have it a 100% zoom, not 0%
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.