Need some css help. Styling homepage with border and clean up a bit

Store Design
, ,

Topic summary

A user seeks CSS help to style their homepage, which features two clickable sections leading to different parts of the same website.

Current Issue:

  • Two images of unequal sizes displayed side-by-side
  • No visual separation between the sections
  • Desire for a decorative border to make sections appear distinct

Solution Provided:
GemPages support team offered custom CSS code to be added to the theme’s base.css file. The code adds:

  • 10px padding on each image
  • White (#ffffff) background
  • Targets specific banner elements using nth-child selectors

Current Status:
The initial solution worked successfully. However, the user reports that duplicating the current theme version causes the CSS changes to disappear, and multiple attempts to preserve the modifications have failed. The issue remains unresolved regarding how to maintain these customizations across theme duplicates.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Hello I have a homepage that pretty much takes you to two different sides of the same website. Currently it looks like the picture below. I would like to make sure the pictures are the exact same size and add a border between them so that they look separate. A nice decorated border perhaps.

BB_Tech_0-1678892092776.png
BB_Tech_0-1678892092776.png2880×1292 1.07 MB

website is: https://biggers-market.myshopify.com/

2

Hello @BB_Tech

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your assets/base.css theme file.

  3. Add the code at the end of the file:

#Banner-template--16099036758185__49493c15-6899-4fd7-8848-4ec17475e498 .banner__media.media.banner__media-half:first-child img{
   padding-right: 10px;
   background: #ffffff;
}
#Banner-template--16099036758185__49493c15-6899-4fd7-8848-4ec17475e498 .banner__media.media.banner__media-half:nth-child(2) img{
   padding-left: 10px;
   background: #ffffff;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

3

Looks great. Thanks

4

Is there a reason why duplicating the current version would get rid of these changes that you helped me with? I have tried multiple different ways and they wont carry over