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();">
Related
I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser. (No issues in the app)
The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling. Whilst it causes no issues on desktop, the same thing happens to the code
On my images, I've set
style="max-width:100% !important;"
inline on each image. I also have a <style> block in the head with
img {max-width: 100% !important;}
When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.
What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.
Inspected in the pc browser, the inline max-width now says
max-width: 1920px;
Viewed on my phone (android, inline max-width is
max-width: 767px;
In this case, the image is now WAY too wide and is breaking the layout. The same thing happens on all images, regardless of their actual size.
I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.
Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head? (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)
Even weirder (or maybe I'm losing it...) I'm SURE this was working yesterday...
UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there...
After a bit more playing, adding width: 100% !important; inline on all wide images seems to work as a fix - gmail doesn't mess with the value. Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!
Gmail is notorious for misusing its maxwidths for set layouts.
try and avoid setting max-width to a percentage value for elements that aren't high level containers. you will run into weird rendering on things like gmail app as well. typically gmail app converts all widths into max-widths so it can crunch your content but still maintain the structure at higher screen resolutions.
gmail webapp does something similar. it restricts the widths you can set an element to so you can't add things that are wider than your display, at which the gmail web app is displaying at 100%.
gmail mobile app - forces your content into a 320px/480px wide box
gmail desktop app - forces your content to never exceed your screen res
Gmail desktop treats styles in the head quite strange anyway, it completely ignores most classes/id's (don't listen to people that say it strips them completely) if you use other tags as identifiers other than #id and .class it will apply those styles. e.g.
* [lang~="identifier"]
lang is pretty much the only tag that you can use that wont get in the way of tags that are being used, i.e. Alt, Title and Href.
Just be careful, if you are using media queries or anything that starts with "#" in the style tag gmail may potentially (depends on how its feeling that day) completely remove that style tag. You can avoid this by adding those styles in a style tag in the body though.
in conclusion. Don't rely on max-width to control your layout from inside out, set pixel values to limit width="100%".
Hope this helps
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.
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.