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.
Related
Well this is an odd behaviour.
I'm coding the frontend of a metrics app that must be viewed in a large tv.
I use Html, Js and Css (bootstrap 4).
It's for general public so we must hide browser tabs, etc..
Whenever I set the browser to go fullscreen, a big white row appears at the bottom of the page. Please see attached picture.
The odd part is that there isn't any element there. It's like the viewport just gets bigger and forgets to cover the bottom with stuff.
Is this a known issue?
How to avoid this and cover on fullscreen?
I'ver tried auto, cover, 100% height, etc..
I found the solution right after posting my question.
html,body
{
min-height:100%;
}
The thing is that if you apply height only to body, it will seek for the parent (html) and found that the size is the same as before so both must have the property in order to get the 100% of the height.
I've been battling with this simple issue for a while and I'm looking for some help...
I'm trying to make a full width colour banner that spans the full width of the page, but doesn't in any way affect the browser viewport sizing. I want it to be visible to human eyes, but I don't want it to affect the size/location of the browser's start view or scrolling behavior... just like it's not really there.
I also want to be able to place the banner in-line in the HTML.
Here is my test page: http://www.tanatu.com/widthtest
The Green Banner works perfectly, but it's y-location is defined in CSS (which is a pain)
The Pink Banner is my best guess so far, and works as intended on Chrome, but not on Safari on iOS, where the viewport is skewed to one side
Safari iOS Positioning Issue
Correct Positioning
I've been playing with this for months so any help would be MASSIVELY appreciated! :0)
Thanks!
Because you are trying to break out of your parent container that is where your challenge is. You can do this a few ways but I think the easiest without completely changing your markup would be to use a combination of viewport width units and calc()
If you change these attributes on #widthtest4 it should work:
#widthtest4 {
width: 100vw;
margin-left: calc(-50vw + 426px);
}
First off, this is not the zoom issue that I've seen in other questions. Also, I'm testing this using an iPhone 4, running iOS 6. In working on a mobile project, I discovered an issue with the viewport tag and mobile safari. I distilled everything into code as basic as I could get it. I have there parameters set:
width=device-width
height=device-height
initial-scale=1.0
maximum-scale=1.0
user-scalable=no
It all works fine, until you rotate the screen. Nothing gets resized, and a black bar appears on the right side to fill in the gap (see screenshots). If I remove height=device-height completely, the problem goes away. However, I do need to use this parameter. Otherwise, I will have to ask a different question.
After rotating back to portrait mode, that black bar remains, and I can scroll left and right. This is a very strange issue. Removing width=device-width does something else unexpected. I have the code here if you would like to try it: http://toastd.net/viewport.html
Here are some screenshots:
Here it is working fine in portrait mode:
When rotated to landscape mode
Then rotated back into portrait mode
The meta tag will help define rules for the viewport but you still need to apply visual styling to address the change in orientation. Give these CSS values a try:
body { width: 100%; height: 100%; }
If you'd like a good resource to help continue your project, PhoneGap has a starter app on GitHub that you can fork.
PhoneGap Start
I believe this is a bug on Safari, but I figured out a way to work around it. It has to do with certain elements and their styles. By process of elimination, I narrowed it down to a few "offending" HTML elements. Deleting width: 100%; from some elements and CSS styles, as well as other static widths like width: 120px; would start to get reduce problem. I say "start to reduce", because the margin on the right became smaller, but didn't go away completely. I then started playing with other CSS attributes like margin and padding. After getting rid of some left and right padding from some elements, the problem finally went away. But this wasn't really acceptable, as those styles were there for a reason.
The solution was to wrap everything in a container element, size that appropriately, and set overflow: hidden; in CSS. Setting overflow: hidden; to the body or html tags would work too, but that did funky things with vertical scrolling in Mobile Safari. In my case, there was already such a container element, so all I had to do was add the overflow property to it.
Like I said, I think this is a bug in Safari. When you rotate from Landscape to Portrait, everything should be resized back to fit portrait mode. Visually, everything does look like it was resized properly. However, Safari must have thought something wasn't resized properly, so it displayed the page wider than it really was. This works just fine in Chrome on an Android device. I also added different background colors and borders to highlight which element might be causing the page to stretch beyond the width of the device screen. Visually, there was no apparent culprit.
If you're thinking it might be a width: 100% plus padding issue, I had the same thought. But then deleting either the width or the margin/padding alone should have fixed the issue, which it did not. Not a single element was sitting beyond the edge of the screen. There was nothing but empty space there.
I have a page I am designing that is purely html with a css stylesheet.
I have it set up with scrollable content with a header and footer somewhat like this example here: http://www.cssplay.co.uk/layouts/basics2.html
except my header and footer consist of multiple images as opposed to text.
The issue I am having is that when I scroll down the page a little and resize the window to a smaller size, my header and footer disappear... but only in Firefox.
When I maximize the window again, the footer appears but some 300-400-odd pixels too high and the header is still gone.
Safari, Opera and Chrome all work fine; I can resize the browser window however much I want and my page reacts appropriately.
What could be causing this?
The weird thing is that if I don't scroll at all, and then proceed to resize the window, Firefox retains my page's styling...
possibly an overflow:scroll issue?
thanks everyone
sorry, i forgot to include my link:
http://www.theskycaptain.com/THESKYCAPTAIN.COM/projects/cosmicwomb.html
(I realize that the bandcamp player isn't behaving properly and my codes a bit messy, but I'm in the midst of developing, I've just hosted it to sort out this issue: simply scroll down a bit, resize the window and then maximize and you will see what I mean)
Your webpage has an improperly defined img and br tags everywhere including other errors that need to be cleaned up.
Incorrect Example:
<img src="../image/topspace.png"></img>
Correct Example:
<img src="../image/topspace.png" alt="image" />
For more info on img tags, read here.
Also, change:
</br>
To:
<br />
Try giving top and bottom values to your absolutely positioned elements.
i.e.
.topspace, .headercon, .scroller { top: 0px; }
.footer { bottom: 0px; }
( These are not necessarily the exact values you'd want, but simply an example )
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?