Is Gmail transitioning from using percentages to pixels for max-width?

I'm currently in the process of creating an html email for different clients, and experiencing some unusual issues with gmail (yay) - particularly when viewing an email through a web browser. (No problems in the app)

The issue mainly arises when using a small screen browser (e.g. mobile) - all images appear too wide despite having a max-width set, causing the layout to stretch and require horizontal scrolling. Although it poses no problems on desktop, the same issue persists within the code.

I have incorporated the following inline style on my images:

style="max-width:100% !important;"

In addition, I have included a <style> block in the header with:

img {max-width: 100% !important;}

Upon inspecting the image element (both on my phone and pc), there is no sign of the max-width from the head, which was somewhat expected.

However, what's perplexing is that each image still retains an inline max-width attribute, but now in pixels instead of percentage.

When inspected on a pc browser, the inline max-width now displays:

    max-width: 1920px;

On my phone (android), the inline max-width appears as:

    max-width: 767px;

In this scenario, the images become excessively wide, disrupting the layout. This occurs with all images, regardless of their actual dimensions.

I do not see any indications of the email being adjusted for my screen or any options to toggle this feature on or off.

Has anyone encountered this issue before? Any suggestions on how to prevent gmail from interfering with the max-width attribute, or getting it to adhere to the max-width specified in the header? (I refrained from using classes or ids to apply styles from the header as Google usually strips them out)

To add to the peculiarity (or perhaps I'm going crazy...), I am positive this was functioning properly yesterday...

UPDATE: I believe I've uncovered why it appeared to work yesterday - it didn't - modifications made in dev tools were not clearing upon reloading, so the test max-width I added (imitating the one in the header) remained intact...

After some further tweaking, adding width: 100% !important; inline on all wide images seems to rectify the issue - gmail does not alter the value. However, it would be intriguing to understand why it modifies the max-width value, if anyone has any insights!

Answer №1

Gmail has a reputation for using maxwidths in a unique way to structure their layouts.

It's best to avoid setting max-width as a percentage value for elements that are not top-level containers. Otherwise, you may encounter strange rendering issues on platforms like the Gmail app. The Gmail app tends to convert all widths into max-widths to optimize content display while maintaining structure at higher screen resolutions.

The Gmail webapp follows a similar approach by limiting the widths of elements so they do not exceed the user's display size, which is typically set at 100%.

For the Gmail mobile app, your content will be forced into a narrow box around 320px/480px wide. On the other hand, the Gmail desktop app ensures that your content never exceeds the screen resolution.

In Gmail desktop, styles declared in the head section may behave strangely as it often ignores most classes and IDs. Using other tags as identifiers can help apply the styles, such as:

 * [lang~="identifier"]

Using "lang" as an identifier tag usually does not interfere with other tags like Alt, Title, or Href.

When using media queries or any declaration starting with "@" in the style tag, Gmail may choose to remove the style tag entirely, depending on its mood that day. To prevent this, consider adding those styles within a style tag in the body instead.

In summary, it's advisable not to solely rely on max-width for controlling layout design from within. Setting pixel values to limit width to "100%" can be a more reliable approach.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To indicate surpassing the character limit, add ... to the conclusion

Is it possible to add ellipsis (...) at the end when the character limit is exceeded? I currently have code that keeps characters on the same line, but I would like it to be displayed in a maximum of two columns and place the excess content at the end. T ...

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

jQuery Autocomplete API Issue: Undefined

I've been attempting to implement a basic text box using the jQuery API from DevBridge. I followed instructions in this video tutorial to create my code. However, despite properly declaring scripts before the JS code and ensuring proper mappings, I&a ...

In which orientation does the iPad come configured as standard?

There seems to be some confusion regarding the default orientation of the iPad. While some believe it is portrait (which is how I typically use my iPad), others argue that it is actually landscape. In my CSS, I have specific settings for targeting elemen ...

Ways to modify font color in JavaScript "type"

Recently, I came across a fascinating technique where by simply refreshing the page, the text changes sentences. I managed to implement the code successfully, however, I am having trouble changing the color, size, and alignment of the text. <script type ...

eliminating the outline from bootstrap button results in an increase in the margin of the buttons

I'm facing a challenge that should be simple, but it's causing me some trouble. I have code that displays text on the left side and two buttons on the right side of the div. These buttons use Bootstrap icons, which by default appear within a bla ...

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

Utilizing various Bootstrap themes within the webpack environment

I am currently developing an app that has dynamic theming requirements, which can only be determined during run time. However, during build time, there are theme variables accessible for all themes. Is there a way to configure webpack to compile node modu ...

Synchronize the hiding and displaying of elements with a corresponding element

If I had a pair of <div> elements set up like this: <div class="overlay"></div> <!-- More content here --> <div class="popup"></div> Whenever the div.popup element is displayed with display: block, I want the div.overl ...

Repeat Top Background

I am currently in the process of converting this design into HTML & CSS code. I am facing a challenge when it comes to repeating the background on the top section since the left and right parts do not use the same image file. Even after attempting to ...

Issue with React: Caret icon in dropdown menu shifts position when page is resized to iPad or smaller dimensions

I'm facing an issue with a styled react component that has a custom dropdown menu featuring a caret icon. Whenever I test the responsiveness of the dropdown, the caret icon ends up outside the intended area. To resolve this, I've wrapped the drop ...

Craft a stunning transparent border effect using CSS

I am trying to achieve a unique border effect for an element using CSS, where the transparency is maintained against the background: This is the desired outcome: https://i.stack.imgur.com/6Z1MU.png However, the border I am currently able to create looks ...

Using Special Fonts in Visual Studio 2013

Encountering a small issue with Visual Studio 2013. My application, developed using html and javascript, utilizes a custom font. When attempting to run the application on a different computer that does not have the font installed, it fails to display corr ...

The element is not displaying the correct width percentage value

When I try to style an element in HTML using Sass, setting the width using percentages doesn't seem to work. I wonder if this issue is related to me using "content-max" to set the parent element's width and height? Here is a simplified version ...

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

Looking to generate flipcards dynamically through javascript or jquery when a button or link is clicked?

I've created flipping cards that flip on hover, but I'm struggling to add a button/link that generates a new flipcard when clicked. Any help would be greatly appreciated - plus, I'm new here! Here's my HTML and CSS code for the flipcard ...

Align the element to the right inside the div class

Struggling with aligning elements to the right within a container div in my Angular 2 project that utilizes Bootstrap 4 and Angular Material. Specifically, I aim to have both a button and text aligned to the right-hand side of the container. Below is the ...

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...

JavaScript - Interactive sidebar that expands and collapses upon mouseover, maintaining its state when navigating between different pages

I am currently developing a multi-page web application using HTML, CSS, JavaScript, and jQuery. My focus is on creating a sidebar component that expands and collapses when the user hovers over it or moves the mouse out. This sidebar contains links to vario ...

The inner panel height does not extend to 100% when there is overflow

When pressing the submit button on a panel containing components, an overlay appears but does not cover the entire parent panel if scrolled to the bottom. Additionally, I want the spinner to always be centered, whether scrolling or not. I've tried usi ...