Trouble fixing responsiveness of images in email

[Gabvo]

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! 🙂

This is the large screen vue (computer): 

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 %}

[webdew]

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.

[Chris-M · Accepted solution]

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.