Site: http://bit.ly/1g0pm65
I have been debugging this site for iPad and can't seem to get the footer and header backgrounds to span full width. It looks fine on the web but for some reason iPad show sup like the attached images (not full width), thoughts?
Looks like a common issue that might be fixed by setting a min-width on the HTML element. See https://stackoverflow.com/a/12242229/2765713
Feels like a bit of a hack though, will need thorough testing cross browser/device.
Related
I am having an issue in the mobile version of the webiste and I wasn't able to find the cause but I think there is a shortage of overflows in either html tag or body tag. I tried a lot of things none of which worked. The website flows out of screen or some areas are not covered at all under 300 px. Which CSS code should I remove or add?
The address of the website I am having trouble with: https://wisekitten.com/can-cats-eat-mayo/
IMG: https://i.stack.imgur.com/xwOEP.jpg
It looks like a problem with your margins on the right, so I'd look at that. Also just a general rule of thumb, you should use percentages in CSS instead of pixels. Your left margins are fine.
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.
I am developing a website with HTML5 Boilerplate and when started checking it on iPhone saw that it doesn't look good at all. It looks like body gets one width (320px) and other elements get another larger than body causing the webpage look like this
screenshot from chrome https://www.dropbox.com/s/hzdd04wufckcewr/Screenshot%202014-01-20%2008.20.51.png
screenshot iOS simulator https://www.dropbox.com/s/llj4w0gp1cxsh86/Screenshot%202014-01-20%2008.21.21.png
I am using normalize.css default styles. The site has some mixed width for example one div's have a 940px width others should have 100% of viewport.
Has anyone seem this problem before? How can it be fixed? Thanks in advance
Apologies in advance for the rudimentary nature of this CSS question.
I'm trying to figure out how to deal with widths in CSS. I have an absolute positioned <div> containing a fairly wide table. The <div> is "1300px" in width. Everything works fine on desktop browsers. People with high resolution monitors see the entire table. Those with low resolution, or those who are viewing the page from a smaller browser window, are able to horizontally scroll the div to see the entire content. All is good.
But something different happens on the iPad2 (Safari) which has a native resolution of 1024px. I expected the iPad to show the first 1024px of content and allow the user to horizontally scroll (swipe?) to see the remainder of the table. Instead, it seems to be trying to cram the entire 1300px into the 1024px screen and then shrinking the type to make everything fit.
What's the standard way of using CSS to tell the iPad browser to show whatever it can at it's native resolution (i.e. 1024) and then allow the user to swipe/scroll horizontally if he wants to see the rest? A small snippet of code would be helpful.
Thanks.
By default iOS Safari will scale down any page to fit the screen. If it's not your desired behavior you can instruct the browser via meta viewport tag in the <head>.
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
Edit: more in-depth explanation: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I don't have an iPad so I can't see, but a few points:
Your xhtml is not valid. <center> doesn't exist anymore (and by the looks of things isn't actually needed in the design anyway), also you should specify the dimensions of any the header image in px.
Don't know why you're using margin:auto on anything other than the mainwrap. Try margin:0; instead.
Try adding * {margin:0; padding:0} to the top of your stylesheet, and then adding in any extra padding and margin you need later - this will more or less set all browsers to the same starting point when it comes to layout.
If you don't want a border use {border:none} (if you say border: 0px solid; some browsers will still try and draw something)
This might not fix the problem, but it will be step in the right direction as the more valid your markup is the easier browsers find it to render.
Try removing width:100% from any of the parent element, then try to fix it.
Hope that it works for you.
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 :)