How can I create an image grid on my webpage?

Store Design
1

I would like to display a few images into a grid style, similar to that of our collection image page:

https://www.sykes.com.au/collections/accessories-rigging-tools-boat-names

The page I would like this grid to occur on is the following:

https://www.sykes.com.au/pages/liteboat-recreational-boats

Essentially, the 3 images shown on the above page I would like to have side by side in a grid like option. I thought of adding a table for this to occur but the table option has been coded / formatted to be the same on everypage and unfortunately this formatting does not suit the requirements of this page.

Any advice on how to do implement this grid option would be greatly appreciated.

2

@Melanie_Bennett ,

Your new page code would be:

<div class="page-content">
  <h1>Liteboat Recreational Boats</h1>

  <div class="rte">
    <p>Liteboat's Recreational boats are very stable, lightweight and easy to use. Available now from Sykes, Liteboat's range of hulls allow you to row on all types of water.</p>
    <p>Liteboat's Recreational Boat Range:</p>
    <div class="grid">
      <div class="grid__item small--one-whole one-third">
        <p><strong>LiteSPORT 1X</strong></p>
        <img src="https://cdn.shopify.com/s/files/1/1096/2066/files/recreational-litesport-1x.png?v=1568068028" />
        <p>Stable, lightweight and easy to use.</p>
      </div>
      <div class="grid__item small--one-whole one-third">
        <p><strong>LiteRIVER</strong></p>
        <img src="https://cdn.shopify.com/s/files/1/1096/2066/files/recreational-literiver.png?v=1568067980" />
        <p>Lightweight pleasure skiff, ensuring fun, speed and stability.</p>
      </div>
      <div class="grid__item small--one-whole one-third">
        <p><strong>LiteSPORT+</strong></p>
       <img src="https://cdn.shopify.com/s/files/1/1096/2066/files/Recreational-litesport.png?v=1568068003" />
        <p>Streamlined hull, easy to handle, fast on all kinds of water.</p>
      </div>
    </div>
    <p>Want to trial a boat? Simply complete your details below.</p>
  </div>
</div>
1 Like
3

That worked - thank you. Vey much appreciated.

1 Like
4

I tried by copying and pasting this exact code but it still doesnt show the images in a grid - see attached.

Screen Shot 2020-05-07 at 12.15.57 pm.png
Screen Shot 2020-05-07 at 12.15.57 pm.png1148Ă—469 107 KB

5

I am trying to do the same thing. Where do you put this code?

6

@sarahalaska & @emshem

Were either of you able to work this out?

I assume that the solution included some classes from the original poster’s existing theme. You are posting into your page using classes that might not have CSS assigned to them.

7

Hello Ccsachs - I copied/pasted your text code - thanks…

But - I was hoping to do a grid of images that are 2 side by side with a label for each :slightly_smiling_face: Can you assist? THANKS!

8

Not my code.
I was just commenting on someone else’s post. I was never able to get the grid to work out the way I wanted.