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.
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'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'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've been working on a website for a little while now, doing most of my testing in Chrome, Firefox, and IE. As I'm wrapping things up, I've tried viewing it in Safari (on Mac, iPad, and iPhone). I've noticed that certain elements are misplaced in Safari. I've tried playing with the CSS, but I've had no luck.
The page can be viewed here - http://staging.princewebdesigns.com/gallais/
See specifically the logo (being pushed down into the banner), the font of the tagline in the banner (wrapping beyond the banner and extending too far to the left), the 'Featured Work' title wrapping, the project names wrapping, and the footer wrapping.
Here is how the page should look - http://staging.princewebdesigns.com/gallais/images/chrome.png
To see how it looks on my iPhone, change the link above to .../iphone.png
Any help is appreciated.
The issue is (I think) that you have your browser's text zoomed in.
I loaded the page in Safari 5.1 on Mac OS 10.7.3, and it loaded fine initially. When I zoomed normally, the layout stayed intact. As soon as I tried zooming just the text, the layout broke per your description.
That being said, you may want to think hard about how to make the layout more 'flexible' in the event a user does have their text size increased. In IE, for example, the default zoom is full page zoom, but a user can still increase their text size apart from zooming. It's worth testing your layout in those situations to make sure it doesn't completely derail. I'm not saying it has to be perfect, but still legible.
One idea is to try out different units. I've found that when declaring horizontal lengths (e.g. margin-left) using relative measurements works, but when declaring vertical lengths, (e.g. margin-top) using pixel measurements works better. For super critical items, like the site logo, positon:absolute may be a good route to try.
i am currently building a website using HTML and and external CSS Stylesheet. I have a "container" which holds the content of my page, central to the body. What i want is that when a user adjusts the text size using there browser that the "container" automatically resizes with the text so that it stays in proportion. At the moment the text size changes but the container doesn't. I hope someone can help me with this problem.
Thanks in advance
Matt
This is a bug in IE, in other browsers e.g. Firefox, the containers will be correctly resized.
You would need to detect the browser type; then if it's IE use some fancy javascript workarounds to get it to work.
Catch browser's "zoom" event in JavaScript