Image + text section spacing

Store Design

Topic summary

A user seeks to reduce spacing between text and image sections on a specific page while ensuring text aligns with images above and below.

Visual Issue:

  • Text and image sections have excessive spacing between them
  • Content needs to be centered and better aligned
  • Screenshots show the current layout with noticeable gaps

Proposed Solutions:

Option 1 (LizHoang):

  • Add CSS code to theme.min.css file
  • Sets padding to 0 for the homepage sections wrapper
  • Includes before/after screenshot showing reduced spacing

Option 2 (DaisyVo):

  • Explains root cause: sections use 50% width each, but images are smaller than containers
  • Offers two approaches:
    1. Shift images left (leaves right-side space, requires per-section editing)
    2. Enlarge images to full width (causes cropping unless section height/padding adjusted)
  • Requests user preference before proceeding

Status: Awaiting user feedback on preferred solution approach.

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

Hi!

How do I decrease the spacing between all text & image sections on this page (passw: wine) and have it centered also? So only the text needs to go further to image, so it’s aligned to the image below and above.

Screenshot 2025-03-05 at 10.56.58.png
Screenshot 2025-03-05 at 10.56.58.png1434×579 330 KB

Thanks so much!

2

Hi @INFRA

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.min.css and add this code at the end of the file

.homepage-sections-wrapper.homepage-sections-wrapper--white.feature-row--no-overlapping.content-width {
    padding: 0 !important;
}

Result

LizHoang_0-1741139545181.png
LizHoang_0-1741139545181.png1141×595 476 KB

Best,

Liz

3

HI @INFRA

There are two sections here: one for text and one for an image, each taking up 50% of the width.

Since the image’s width is smaller than its container, there’s extra space around it:
Screenshot 1
Screenshot 2

There are two ways to adjust this:

  1. Shift the image to the left, but this will leave empty space on the right. This approach would require editing each section separately since some sections have the image on the right, meaning adjustments need to be made accordingly.
  2. Enlarge the image to fill the entire width, but this will cause the image height to exceed its container, resulting in cropping. To avoid cropping, the height of the entire section (both image and text) would need to increase, which means adjusting the top and bottom padding of the text.

Let me know which option you prefer!

Best,

Daisy