Html Question posted in
Some basic documentation can be found here.

max-width not working in html email when Gmail is accessed from mobile browser?

I’m trying to have a column with a width of 600px and a max-width of 100%

<table style="width:600px;max-width:100%" id="my-table">
    <tbody>
        <tr>
            <td> </td>
            <td > <img style="width:600px;max-width:100%"> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

I tried this in gmail in Samsung Internet and in Firefox, and in both cases it’s showing a width bigger than the screen. I also tried adding

<style>                              
@media screen and (max-width:500px) {
    table {
        max-width: 350px !important;
    }
}

</style>

but it does not work either. It does work on the Gmail app though

Tags:

3

Answers


  1. 0

    Gmail and some email clients have limited support for CSS, and the styles might not render as expected. You can try this:

    <table width="100%" style="max-width:600px;">
    <tr>
        <td style="width:33.33%;"></td>
        <td style="width:33.33%;"><img src="your-image-url.jpg" style="max-width:100%; height:auto;"></td>
        <td style="width:33.33%;"></td>
    </tr>
</table>
    Login or Signup to reply.
  2. 0

    One thing I always do is to ensure that my webpage displays the same to achieve that I set / unset default page parameters.

    In your case you can try to maybe force the html and body width and height attribute to 100% in your CSS file.

    Also check your paddings and margins which can sometimes cause you a lot of troubles.

    Login or Signup to reply.
  3. 0

    Gmail mobile webmail does not support <style> tags and media queries. https://www.caniemail.com/features/css-at-media/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search