Trouble fixing responsiveness of images in email

SOLVE
Gabvo
Participant

Hello guys!
I'm currently using the Root template for emails, but face some problems in responsiveness of images. 
As you can see here below, the images on mobile are very small, and I'm trying to put them above every box in full width, instead of the images staying to the left in small.
Could you help me out?

Thank you! 🙂
Screenshot_20201103_105355_com.google.android.gm.jpg

This is the large screen vue (computer): 

image (15).png

 

Here the code of this part of the template: 

 

{% for contents in module.feature_column %}
<table width="600" style="width: 100%; min-width: 100%;">
    <tr>  
        <td style="height: 10px; padding: 0;"></td>
    </tr>
    <tr>
        <td width="140" style="width: 140px; padding: 0;"><img src="{{ contents.featured_image.src }}" width="140" height="140"alt="{{ contents.featured_image.alt }}" style="display: block;"></td>
      
      <td width="560" bgcolor="#ebf4f3" style="width: 560px; background-color: #ebf4f3; padding: 0 20px;" class="feature-text">
            <div style="font-weight: 700; text-transform: uppercase;">{{ contents.feature_title }}</div>
            <div>{{ contents.feature_text }}</div>
        
        </td>
 
      
    </tr>
  
</table>
{% endfor %}

 

CSS
0 Upvotes
1 Accepted solution

Accepted Solutions
Chris-M
Solution
Top Contributor

Hello @Gabvo,

 

in your code i'm seeing some problemes with the width of your content.

Your <table> has a width of 600px.

Your first <td> has 140px

Your second <td> has 560px

Your <td> needs much more width than the actual <table> width

 

If you want to put the images above the text (in mobile), you have to use a media query and size up the container to use 100% width, for example:

  @media only screen and (max-width:480px) {
    td {
      width: 100% !important;
      display:block !important; 
    }
  }

Instead of td in this css you should use a class.

 

I hope this helps somehow.

View solution in original post

2 Replies 2
Chris-M
Solution
Top Contributor

Hello @Gabvo,

 

in your code i'm seeing some problemes with the width of your content.

Your <table> has a width of 600px.

Your first <td> has 140px

Your second <td> has 560px

Your <td> needs much more width than the actual <table> width

 

If you want to put the images above the text (in mobile), you have to use a media query and size up the container to use 100% width, for example:

  @media only screen and (max-width:480px) {
    td {
      width: 100% !important;
      display:block !important; 
    }
  }

Instead of td in this css you should use a class.

 

I hope this helps somehow.

View solution in original post

webdew
Top Contributor | Diamond Partner

Hi @Gabvo 
For the responsive image in mobile. you have to add the area section before dnd section. you can use this area class in media query according to use.