ayd4n
New Coder
Hi.
I will start by saying I have no prior HTML/CSS knowledge and all the code I have below is created from using various coding help sites.
I'm wanting to create a row of 4 images that will convert to a 2x2 grid on mobile devices. The code is to be applied to Mailchimp and be used for sending out email marketing. I've checked my code through and it seems to work how i'd like it too.
However, the code does not work on Mailchimp newsletters. After digging around, I noticed Mailchimp requires adding mcnImage to all <img> tags to allow them to support media queries. This is where I believe my issue lies. (mcnImage - Add to <img> tags to get rid of the space below images and make them fluid in mobile email clients that support media queries.)
However, I am unable to locate where to add mcnImage into my code (see below) and how to get it to work correctly whilst still following the layout in my code.
Forgive me if my code is messy, as previously stated, this is my first time experimenting with code. I'm more familiar with photoshop and other Adobe programmes.
[CODE title="Code found here:"]<!DOCTYPE html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 768px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<!-- Photo Grid -->
<div class="row">
<!--"Image1"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-micro-hw-lens-sweatshirt-51832">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/vwtjyFeaNGJCPaaRT6Bhye9BxT2oP8BOcSLO9PZk.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px;">Micro Lens Sweatshirt</p>
</div>
<!--"Image2"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-cord-overshirt-51831#?variant=49">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/Pv8JHxngIg6No4tVvyfilYjTM2HFq2Tgke69GdNH.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Lens Cord Overshirt</p>
</div>
<!--"Image3"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-gabardine-hooded-jacket-51830#?variant=1497">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/SiFPZJ5nmkd5CZDa4OYN2hlnvOuljAAuFcg8RIUn.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Gabardine Hooded Jacket</p>
</div>
<!--"Image4"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-stitch-logo-crew-neck-t-shirt-51833">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/Vgs2zpaBTZs14a1IuLxWoLV1HZPxzQb7fVrQjbcg.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Stitch Crew Neck T-Shirt</p>
</div>
</div>
[/CODE]
I will start by saying I have no prior HTML/CSS knowledge and all the code I have below is created from using various coding help sites.
I'm wanting to create a row of 4 images that will convert to a 2x2 grid on mobile devices. The code is to be applied to Mailchimp and be used for sending out email marketing. I've checked my code through and it seems to work how i'd like it too.
However, the code does not work on Mailchimp newsletters. After digging around, I noticed Mailchimp requires adding mcnImage to all <img> tags to allow them to support media queries. This is where I believe my issue lies. (mcnImage - Add to <img> tags to get rid of the space below images and make them fluid in mobile email clients that support media queries.)
However, I am unable to locate where to add mcnImage into my code (see below) and how to get it to work correctly whilst still following the layout in my code.
Forgive me if my code is messy, as previously stated, this is my first time experimenting with code. I'm more familiar with photoshop and other Adobe programmes.
[CODE title="Code found here:"]<!DOCTYPE html>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 768px) {
.column {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
.column {
flex: 100%;
max-width: 100%;
}
}
</style>
<!-- Photo Grid -->
<div class="row">
<!--"Image1"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-micro-hw-lens-sweatshirt-51832">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/vwtjyFeaNGJCPaaRT6Bhye9BxT2oP8BOcSLO9PZk.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px;">Micro Lens Sweatshirt</p>
</div>
<!--"Image2"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-cord-overshirt-51831#?variant=49">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/Pv8JHxngIg6No4tVvyfilYjTM2HFq2Tgke69GdNH.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Lens Cord Overshirt</p>
</div>
<!--"Image3"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-gabardine-hooded-jacket-51830#?variant=1497">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/SiFPZJ5nmkd5CZDa4OYN2hlnvOuljAAuFcg8RIUn.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Gabardine Hooded Jacket</p>
</div>
<!--"Image4"-->
<div class="column">
<a href="https://psyche.co.uk/product/cp-company-stitch-logo-crew-neck-t-shirt-51833">
<img src="https://d2gc4meuhv69oo.cloudfront.net/image-factory/600x753/images/products/fm/Vgs2zpaBTZs14a1IuLxWoLV1HZPxzQb7fVrQjbcg.jpg" alt="Psyche" class="center" style="width:80%"></a>
<p style="text-align:center; font-family:arial; font-size:13px; font-weight:bold">C.P. Company</p>
<p style="text-align:center; font-family:arial; font-size:11px">Stitch Crew Neck T-Shirt</p>
</div>
</div>
[/CODE]