Jinja2 Email Template

Using Jijna2, I'm trying to make a responsive HTML email template which is almost simple

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul>
        {% for image in images %}
          <a href="{{ image }}">
            <img src="{{ image }}" width=500" height="200">
          </a>
        {% endfor %}
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

That's what is shown currently:

and during full screen:

How to make it responsive in this case and keep the display of images one by one. not side by side during full screen or mobile screen!

Solution

I won't consider this responsive but to keep images one on top of each other, you can try to just have them as list items and hide the list bullets with list-style: none, like:

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul style="list-style: none">
      <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

Or as I told you in comments, make the anchor link to have full width like: <a href="{{ image }}" style="width:100%">