It seems like repeat-x for background property is not working on iphone safari browser.
Is there an alternative solution to this issue?
Don't use repeat-x or repeat-y but just repeat.
Works, tested.
I'm thinking this might be the problem with your page...
Incorrect width on iPad Note that even though the guy never accepted.. My way of doing it at least solved that problem..
On ipad like half of his page bg and header and footer went missing. This is really quick fix ( if you have the same problem ), basically you just set the same background ( the one that gets cut off ) again in inner elements that have a static width. Static width is the key word here, because window width doesn't cut those off.
Also as stated in that answer, in desktop browsers if window width is smaller than page width and you scroll to the right it will cut the bg. That is very common thing to see actually.. your page does the same.
Im fairly certain this will solve your ipad issue.
Related
I've made a responsive website using bootstrap and media queries to alter the CSS for various screen sizes.
I have a section which displays incorrectly on the iPad when landscape, but it works fine when I test it on a browser at the same viewport width.
I have a col-md-8 offset by 2 and within it there are 3 col-sm-4 divs with an image in each set to 100% width of parent container (which I have drawn an example of in the linked image). http://pasteboard.co/8J885OF.png
This is how it displays in the browser at both the same viewport with as a landscape iPad and for larger widths and is how it should be. It also resizes fine for narrower widths (the columns collapse etc) in the browser and on mobile.
But on iPad landscape the div/images positioning and width gets completely messed up (and becomes bigger than the viewport) and I can't figure out why. Here is what it looks like. http://pasteboard.co/8Jt4NZo.png
Other random bits of CSS also get ignored in this mode for some reason whilst other stylings are fine. The styling for some of the links for example gets ignored (usually white text and pink background with CSS3 hover effects, but instead becomes plain blue underlined text as if there is no CSS applied to it at all).
Does anybody have any ideas why this is happening?
EDIT:
I'm sorry, I have just found a rogue # in the CSS file and removing this has fixed it. I thought I'd searched thoroughly to make sure it wasn't a typo problem but I must have missed it. Thanks all.
I'm sorry, I have just found a rogue # in the CSS file and removing this has fixed it. I thought I'd searched thoroughly to make sure it wasn't a typo problem but I must have missed it. It's odd that it messed up the CSS only for the ipad and only in landscape mode and not for the browser.
Thanks all, hope I haven't wasted anyone's time.
Hi guys as the title says.. i keep getting this horriable right margin when i go down to ipad viewport size and when i view it on the ipad hence you get horizontal scroll bars.. major issue and quite annoying... But when i get down to the view of iPhone it goes away.. really strange.. can any one please help..... you can check it out here
I've deleted all elements from the page and i still get the problem.. so annoying
Click Here to View Problem
In your css, your section and footer style rules have a negative margin left and right. I took them out and it seemed to fix it for me. Perhaps look to see if you have some in your header as well?
I'm not sure why you have a negative margin here, but if you absolutely need this margin at higher window sizes, look into adding these rules into your ipad breakpoints.
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)
I'm having an issue with a background image with repeat-x property :S
On Windows OS, it seems working fine but not on Mac.
When I open the web, I see bunch of white space chopped off on the right side
and it corrects itself when resizing the size of the window :O
I think my method to set its width has a problem but cannot figure out exactly why.
http://www.sangminkim.com/sample/index.html
This is the url for the page.
Thanks in advance.
Issue: Background image doesn't display when starting from a small view and scrolling to the right.
This issue cannot be solved. If you inspect the HTML and BODY elements, the background stops where the elements stop. The HTML and BODY elements cannot be larger than the view port. This is a common issue and cannot be corrected (it even happens on the footer of StackOverflow).
I'm working on http://www.lceonline.co.uk
When working on a smaller screen res, anything less than 1000px, I'm getting a horizontal scroll bar appear. This happens on all browsers.
I've tried
overflow-x : hidden;
but then the web pages' background doesnt repeat, it just seems to be one large gray background. It also is a css-3 property, One i'd rather try and avoid.
I've had a look at the sites' DIV tags and still cant see what is actually causing the problem. I havent built this from scratch, someone else worked on it before me and I feel they have used too many containers.
Can someone provide me with a possible solution on how to get rid of it?
Thanks
Your issue is that
#page-container and #page-container2 both have width:1000px;
If you remove the width from both of those the scrollbar disappears, as does the centring and the gray background.