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> </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!
3 Answers 3
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> </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%">
Comments
You can simply use a class on the image container li and then make that class have a width of 100% using css
So in your case:
<style>
.full-width{
width: 100%;
}
</style>
<!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> </p>
<ul>
{% for image in images %}
<li class="full-width">
<a href="{{ image }}">
<img src="{{ image }}" height="200">
</a>
</li>
{% endfor %}
</ul>
<p><strong>Regards,</strong></p>
<p>Team</p>
</body>
</html>
Should do the trick.
Comments
Good morning Ahmed, what you can do is insert the css code you need to behave responsively, as in the example:
<style type="text/css">
body {
margin: 0;
padding: 0;
}
table,
td,
tr {
vertical-align: top;
border-collapse: collapse;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors=true] {
color: inherit !important;
text-decoration: none !important;
}
</style>
<style id="media-query" type="text/css">
@media (max-width: 520px) {
.block-grid,
.col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
<li style="width:100%">?