Coding for images to be side to side

Chilim_Ng
New Member
1 0 1

Hi, I want to make a page with images but I can't seem to get them to be side to side with the size I want and with the gap I want. Does anyone know how to code this so I can do what I want it to do? Thanks

Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Chilim,

Britton here with the Shopify support team.

It will be a bit hard to get you the exact solution that you are looking for without knowing a bit more info, but I can offer some general advice.

For images to be side by side on one line you need to change their display property. They might be displaying as "block" level elements by default in your theme and these don't allow other elements to sit in the same row by default. The way to change that is to set their display property to "inline-block" using CSS.

As for adding spacing, that is usually accomplished by setting margins via CSS. You can similarly set maximum heights and widths to images using CSS. Here is an example of how it could look:

.rte img {
display: inline-block;
height: 250px;
width: auto;
margin:10px;
}

If you add the above code to the bottom of your main CSS file for your theme then it should change the images to sit inline, add spacing around image elements and force them to have a specific height. Just be mindful that you will probably want to play around with the above numbers. Also, this code will affect all images added inside of a rich text editor. That means all pages, products and collections. If you want it to be more specific, like only target pages, you could try this too:

.template-page .rte img {
display: inline-block;
height: 250px;
width: auto;
margin:10px;
}

Always remember to back up your theme by duplicating it before making any code changes. I hope that helps!

-Britton

Britton Shopify Guru
0 Likes
ViveKM
Tourist
6 0 1

Hi Britton,

Would this technic work with Sub-Category page as well.

 

What i m looking is to have Sub-Category Page (ie Clothing, which has sub-categories like Men::Women:Kid), should have Sub-Category Images displayed in Grid (Same row).

Can you Please help me here.

 

V

 

 

0 Likes
ViveKM
Tourist
6 0 1

Hi Britton,

Would this technic work with Sub-Category page as well.

 

What i m looking is to have Sub-Category Page (ie Clothing, which has sub-categories like Men::Women:Kid), should have Sub-Category Images displayed in Grid (Same row).

Can you Please help me here.

 

V

0 Likes
Divya_Pandey
Shopify Partner
1 0 0

Hello Britton,

Can you help me how to achieve this look on the product pages? 

So, Instead of showing one image, I am trying to show 2 images with a zoom feature. 

 

0 Likes
CultureV
Tourist
9 0 0

Where do  add this coding ?

 

0 Likes