Hi Ryan,
you could use the following code for that:
<style>
@media (min-width: 768px) {
.container {
display: flex;
justify-content: space-between;
}
.column {
flex: 0 0 48%;
}
}
@media (max-width: 767px) {
.container {
text-align: center;
}
}
</style>
<div class="container">
<div class="column" style="text-align: center;">{% if not 'XY' in item.product.title and not 'YZ' in item.product.title %}
<div style="text-align: center;">{% if item.product.variant.images.0.src %} <img style="width: 200px; display: block; margin-left: auto; margin-right: auto;" src="{{ item.product.variant.images.0.src }}" width="200"> {% else %} <a href="{{ organization.url|trim_slash }}/products/{{ item.product.handle }}" style="color: #000000; font-weight: 400;"><img style="width: 200px; display: block; margin-left: auto; margin-right: auto;" src="{{ item.product.images.0.src|missing_product_image }}" width="200"></a> {% endif %}</div>
{% endif %}</div>
<div class="column" style="text-align: center;">{% if not 'XY' in item.product.title and not 'YZ' in item.product.title %}
<h3 style="text-align: center; margin-top: 10px;"><span style="color: rgb(0, 0, 0); font-weight: 400; font-size: 18px; font-style: normal;"> <a href="{{ organization.url|trim_slash }}/products/{{ item.product.handle }}" style="color: rgb(0, 0, 0); font-weight: 400; font-style: normal;">{{ item.product.title }}</a> </span></h3>
<p>Quantity: {{ item.quantity|floatformat:0 }}<br>Price: {% currency_format item.price|floatformat:2 %} {% if item.compare_at_price %}<span style="text-decoration: line-through; font-size: 12px;">{% currency_format item.compare_at_price|floatformat:2 %}</span> {% endif %}</p>
{% endif %}</div>
</div>
The way it works:
- You still using the dynamic table but instead of two columns you only have one text column where you put the code from above.
- For XY or YZ you put the product title of the product you want to hide in the dynamic table (has to match the title in the event - case sensitive.
- You have to replace that twice (once to hide the image from the table and then once for the title and quantity on the right side of the table).
- The html is also mobile optimized and will show two columns on desktop and only one on mobile.