Padding between homepage gallery images - Debut Theme

Highlighted
Tourist
11 0 1

Dear legends of Shopify,

On my website www.tucknee.com I am trying to get spacing in between the images. Right now there are 3 images in the gallery and they are all attached to eachother. 

Does anyone know some css to control the padding on these images within the gallery? My goal is to have some alround padding on all the gallery images on the homepage.

Thank you in advance!

Frank

 

0 Likes
Highlighted
Pathfinder
112 1 34

Hey Frank,

You'll have to edit the theme code and CSS to do this. I'll walk you through it.

Before continuing, please make a backup of the files I am instructing you to change in case something goes wrong.

Go to your admin panel.

  1. Click on the Online Store link on the left menu under Sales Channels.
  2. Click on the Themes link on the left menu.
  3. Click on the white Actions drop down button on your active theme then select Edit code.
  4. You should now see a list of files and folders.
  5. Click on the Sections folder. There should be a image-bar.liquid file. Click on that.
  6. At the first line of code at the top, you should see code that looks like this:
  7. <div class="grid grid--no-gutters image-bar image-bar--{{ section.settings.section_height }}">

     

  8. Replace the code above with this (copy and paste)
  9. <div class="grid image-bar image-bar--{{ section.settings.section_height }}">

     

  10. Click on the white Save button.
  11. Now click on the Assets folder. There should be a theme.scss.liquid file. Click on that.
  12. Scroll down to the bottom of the text area and copy and paste this CSS:
  13. .grid.image-bar .grid__item {
      padding-left: 30px;
    }

    Change the 30px to how ever much padding you want between the images.

  14. Click on the white Save button.

The images in the gallery should now be spaced out. Let me know if that works.

 

 

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
Highlighted
Tourist
11 0 1

Hi Alex Espinoza

This is exactly why I started of my first message with "Dear legends". You absoluttely killed it with that information you gave me!!!! 

The only thing I have changed was to add some padding alaround because I like the way that looks, but your info was spot on!

Your code:

.grid.image-bar .grid__item { padding-left: 30px; }

Changed it to:

.grid.image-bar .grid__item {
  padding-top: 4px;

padding-right: 4px;

padding-bottom: 4px;

padding-left: 4px;
 
}

Thank you so much for taking the time and writing me such clear instructions.

Kind regards,

Frank van Velzen

Highlighted
New Member
1 0 0

Thank you for this thread - this helped me alot! 

 

I do have one more question tho - the padding in my gallery is know perfect, on desktop. How do I get padding on the mobile version? 

 

I am using the theme "Debut" - everything worked fine. Just wanna know what I do have to change in order to have padding on mobile? 

 

Cheers!

0 Likes
Highlighted
Tourist
4 0 1

HI 

 

 

 

 

Highlighted
New Member
1 0 0

Hello @Alex_Espinoza , great reply. Now I am facing the same issue but this time its non-sectioned theme called Venture, can you or anyone assist on this as well?

0 Likes
Highlighted
New Member
1 0 0

Hi! I'm having the same problem, but I am a bit lost with coding. 
I got to step 12. Found mutliple "text area"s in the code, which is the right one?
Using debut theme. And would like some space between the images in the gallery.

 

Thanks :)

0 Likes
Highlighted
Tourist
4 0 0

Hi there, 

 

Could you help me create the code if I want to decrease the space between the product images. 

 

My website is www.shoplemarche.com , I'd like all product images on the main page and on the products page to be closer together. 

 

Thanks!

0 Likes
Highlighted
New Member
1 0 0

I did this and it worked on the desktop view.  In the mobile view, it indented the gallery images slightly to the left (so they are no longer flush left), but they are still grouped together vertically.

0 Likes
Highlighted
Excursionist
13 0 3

thank you for sharing this!
 But now my images look like this. how to i add padding to have the top & bottom image have white padding too?

 

Screenshot 2020-09-15 at 11.46.16 PM.png

0 Likes