Fix padding First images: to much white space

Store Design
, , , , , , , ,

Topic summary

A user seeks to reduce excessive white space above image galleries on their Shopify store’s homepage and bring images closer together.

Initial Solution:

  • Add custom CSS to theme.liquid file before the closing tag
  • Target the first gallery block with padding and gap adjustments
  • Values are customizable based on preference

Follow-up Issue:
After implementing the fix, extra white space appeared on the right side of the gallery.

Additional Fix:

  • Add CSS rule to center the entire gallery block
  • Note: Spreading images further would increase gaps between them, so centering is the optimal solution

Status: The discussion appears resolved with a two-part CSS solution, though the user hasn’t confirmed final satisfaction.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I need to fix the padding up top maybe 50px up on desktop to much white space> also if possible make the images closer together. My site is https://vazluxe.com’

less opadding.png
less opadding.png2407×1302 284 KB

1 Like
2

Hey @Luxurymrkt .

Let’s try the following:

  • Navigate to Online Store > Three dots > Edit code
  • Find the theme.liquid file
  • Paste the code below right before the closing tag
  • Save and hard-refresh the storefront

Feel free to adjust the values, of course. The CSS above only targets the first gallery block.

If applied correctly, the result should be:

Screenshot_3.png
Screenshot_3.png1399×908 115 KB

1 Like
3

It worked but theres still this extra space on the right side. Possibly to fix?

extra space.png
extra space.png2106×1275 245 KB

4

You can add the following block (the same way) or just paste the rule into that previous block.

This would center the whole block. This is the best I can do, as spreading out the images would increase the gap between them.