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.
Related
EDIT: Setting the containing divs' height and width to rem sizes instead of em seems to have eliminated this problem. I don't know why. I tried replicating the code in CodePen to see if I could isolate it but it doesn't happen there, so I'm just hoping that someone has seen something like this before and can give me an idea of why this may be happening.
I have a block of images that renders sort of like a table, only it's not. It's just a bunch of inline divs containing img tags, and I allow the divs to collapse according to their default behavior when the page resizes, because it works fine, just as long as I set a min-width to make sure they remain at least two columns wide.
My problem is that some of the images sometimes load as larger than they should - even though the containing divs have explicit height and width set (the images are set to height: 100% and width: 100%). This happens only in Chrome mobile (at least of Chrome, Firefox, Edge and IE on PC and Chrome and Firefox mobile), and yet sometimes it works - you can keep refreshing and see issues with different images, and sometimes they're all fine. Firefox mobile renders it fine every time.
So of course I plugged my phone into my PC to load up Remote Devices in Chrome devtools and try to investigate - but as soon as I connect to the Remote Device in devtools, the pictures on the phone instantly resize into their correct positions right before my eyes. Does anybody know why this might happen or what I can do to get them to look right on every load?
You can to use the bootstrap class; class='img-responsive'
see example below:
<img src="images/footballkids.jpg" class= 'img-responsive' id="img1" onmousemove="cssmouse();">
I have the same problem described here whereby on higher dpi displays, firefox appears to be scaling my whole site up by 20%. This includes all site elements, not just text.
Is there a way to force firefox to display pixel-pixel accuracy? for example, I have a wrapper set to 800px at wider viewports, however, firefox is ignoring this by increasing it by 20%, which causes scrolling.
a working copy of the site is here
I have already set viewport and css reset.
The same issue is described here Note that don't want a local fix for this, but something that will work for anyone that views the site.
Thanks.
Or who knows, maybe it's Chrome, Safari, and Opera, which all show the images how I want them, that are wrong.
Essentially what I have is an image and some associated text that I want on the side of the image when the window is big, and below the image when it is small. The problem happens when the window is mid-range width. The image should shrink a bit to allow room for the text (as it does in webkit/blink). Anyway, it's probably best demonstrated in a jsfiddle:
full screen
editor
I included some Javascript in there that I use to control the height if the image is taller than the window, but I guess jsfiddle doesn't update window.height and that part works in all browsers anyway so I didn't bother debugging it. Though I am curious if anyone has a CSS/non-javascript solution for that.
And I guess the fullscreen javascript doesn't work in jsfiddle either, so I just uploaded an all-in-one file here where everything does work (besides the issue I'm writing about.
.mediaFile { width:auto;}
changing to…
.mediaFile { width:100%;}
I found changing .mediaFile width to "100%" makes Firefox show the image at the correct width most of the time, but causes other issues with fullscreen and small-height-windows that makes it more of a problem than a solution.
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 :)