• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Row of 4 images that convert to 2x2 grid on mobile devices.

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

BGB

Active Coder
Staff Team
Guardian
Remove your second media query which is resetting your layout. Always add head and body tag.
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Image Row</title>
    <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%;
        }
    }

    </style>
</head>

<body>
    <!-- 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>

</body>

</html>
 

Attachments

  • 2grid.jpg
    2grid.jpg
    77.5 KB · Views: 3

ayd4n

New Coder
Remove your second media query which is resetting your layout. Always add head and body tag.
HTML:
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Image Row</title>
    <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%;
        }
    }

    </style>
</head>

<body>
    <!-- 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>

</body>

</html>
Hi BGB,

Thank you for this update. I was not aware of this.

However, it still appears I need to apply 'mcnImage' to <img> tags to allow them to support media queries in Mailchimp, as they still do not show as 2x2 on mobile when sending from Mailchimp. What would I add/change to allow this to work?


Thanks,
A
 

ayd4n

New Coder
Try to decrease the media query size. 768px is not the screen size I think.
Hi BGB.

Even after setting the media query to 480px, which is the correct size for mobiles, I get the same issue.

I believe the issue lies within 'mcnImage' not being applied to <img> tags.

Do you know how I apply this, please?
 

BGB

Active Coder
Staff Team
Guardian
I am not familiar with mailchimp, you will need to try it by yourself or please ask the question in mainlchimp forum(if available).
 

Top