CMS Development

Gabvo
参加者

Trouble fixing responsiveness of images in email

解決

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

 

0 いいね!
1件の承認済みベストアンサー
Chris-M
解決策
トップ投稿者

Trouble fixing responsiveness of images in email

解決

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.

元の投稿で解決策を見る

2件の返信
webdew
ガイド役 | Diamond Partner
ガイド役 | Diamond Partner

Trouble fixing responsiveness of images in email

解決

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
解決策
トップ投稿者

Trouble fixing responsiveness of images in email

解決

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.