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
Related
Update: It turns out Apple just silently prevents you from having a fixed-size iframe in iOS. Awesome. How to get an IFrame to be responsive in iOS Safari?
I am trying to do something I expected to be really simple: embed a fixed-size <iframe> inside an absolutely-positioned div.
This is running on WKWebView on an iPad.
No matter what I try (and I've tried everything I can think of), it will not respect the size I tell it to be, and instead always auto-sizes its height to match its contents.
I'm just trying to figure out how to stop this.
Here are the CSS attributes, taken right from Safari while connected to the iPad:
The <iframe> element itself also has its height and width attributes set to the same values:
But as you can see from the Computed view, it is completely ignoring all attempts to set its height and ends up rendering like this:
What in the world is going on? It is causing my web app to scroll way out of the bounds of what should be its fixed screen size. I've been fighting this thing for over an hour and have made zero progress.
You should be able to just set the overflow to hidden. This will clip to the set size. I wouldn't use the iframe though. They are considered obsolete in page layouts.
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
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 am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
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.