How to remove or change the color of a long black strip on my homepage?

Store Design

Topic summary

A user encountered a long black strip appearing on their homepage and sought help to either remove it or change its color to match the rest of the site.

Solutions provided:

  • CSS modification approach: Add code to the theme’s CSS file (via Online Store > Edit Code > Assets) to set the .page-border element’s position to unset and height to 0px with !important flags.

  • Theme.liquid approach: Insert CSS code before the </body> tag in the theme.liquid file to either:

    • Hide the element completely using display: none
    • Make it transparent by setting background-color: rgba(0,0,0,0)

Outcome: The issue was successfully resolved—the user confirmed the solution worked.

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

Hello, Can anyone show me or help remove the long black strip along my home page or at least change the color to match the rest of the site please.

Screenshot 2022-11-11 at 1.51.09 AM.png
Screenshot 2022-11-11 at 1.51.09 AM.png2880×1800 179 KB

2

Hello @AbdulShakir ,

Add the CSS below of Online store >> Edit Code >> Assets >> theme.scss

.page-border {
height: 0px !important;
position: unset !important;

}

3

Hello @AbdulShakir

I would like to give you some recommendations to support you

  1. Go to Online Store->Theme->Edit code

  2. Open your theme.liquid theme file

  3. Paste below code before :

Change this background to transparent

.page-border {
    background-color: rgba(0,0,0,0);
}

or hidden this :

.page-border {
   display: none;
}

Hope my recommendation can works and support for you!

Kind & Best regards!

GemPages

4

Thank You, It worked !!.