Hi All,
I need help selecting a border on my homepage. Not sure why this is so difficult for me. I only want to remove this border on desktop.
https://2d26b3.myshopify.com/
PW: reishi
Topic summary
A user is trying to remove a specific border appearing on their homepage, but only on desktop view. The issue involves a double-hero grid element that’s creating an unwanted visual separator.
Proposed Solutions:
-
First approach: Add CSS code to
app.cssorbase.cssthat targets the grid cell outline:- Navigate to Online Store → Theme → Edit code → Assets → app.css
- Insert CSS to set outline to none with
!importantflag
-
Enhanced solution: A second responder suggests additional CSS to completely remove whitespace by unsetting the gap property on the double-hero grid element
Both solutions involve adding custom CSS code at the bottom of either the app.css or base.css file. The discussion remains open as the original poster hasn’t confirmed whether either solution resolved the issue.
Follow this:
- Go to Online Store->Theme->Edit code
- Asset->app.css → paste bellow code in bottom of file
.hero-double > x-grid > x-cell{ outline: none !important;}
Best regard
Hi,
You can add this in addition to the code provided by the other person, it will completely remove the whitespace. The following code will do what you want. You can place the code at the bottom of the app.css or base.css file.
.hero-double x-grid {
gap: unset !important;
}