I want to remove this dark gray box under my slide. When I uncheck “show content below images on mobile” it goes away but it also removes my buy now button. Please help I have been trying to fix this for days now
Store - permacurl.shop
Refresh theme
Topic summary
A user is trying to remove a dark gray box appearing below a slideshow on their Shopify store. The box disappears when disabling “show content below images on mobile,” but this also removes the “Buy Now” button.
Solutions Provided:
- Multiple users suggested adding CSS code to
base.cssortheme.liquidto hide the gray box while preserving the button - Initial fix successfully removed the box but positioned the button too high on the page
- Further CSS adjustments were made to reposition the button using absolute positioning
- Additional code was provided to resize the button for mobile devices using media queries
Current Status:
- Mobile view is now working perfectly with proper button sizing and positioning
- Desktop button remains slightly smaller than desired
- The issue appears related to custom code someone previously added to display the button above the image on mobile, which affects positioning across devices
- User removed the latest CSS snippet, keeping an earlier version that fixed mobile but left desktop suboptimal
1 Like
Hi @austin89s
Please follow the instructions below to resolve this
- From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
- Go to Asset folder and open the base.css file
- At very end of the code, add the code below
div#Slider-template--19275072274754__slideshow .slideshow__text.banner__box.content-container {
padding: 0 4rem !important;
}
Result here
From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
In your theme.liquid file search ‘.slideshow__text.banner__box’
You will see the following code there
.slideshow__text.banner__box {
padding: 8rem 4rem 0rem !important;
}
Just change it to
.slideshow__text.banner__box {
padding: 0px !important;
}
It’s just a hunch according to your theme, i think someone might have added it there.
Hello @austin89s ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Assets → base.css folder or theme.scss.liquid file
Add this following code at the bottom of page
.dark-gray-box-selector {
background-color: transparent;
border: none;
}
Save and preview
Hope this can help. Let us know if you need any further support.
Ali Reviews team.
The section you are using usually display the button and text below that image on mobile but i think someone custom coded that to show above
In the theme.liquid you can search ‘.banner__buttons’
You will see the following code
.banner__buttons {
margin: 5 !important;
margin-top: -225px !important;
margin-left: -25px !important;
}
and replace that with (or add this css right below that)
the displacement of the button will not be perfect for each device though
.banner__buttons {
position: absolute;
margin: 0px !important;
top: -45px;
left: 30px;
}
1 Like
it worked thank you. dont mean to keep nagging so no big deal if this cant be changed but where is the code to make the button a tad smaller? Everything else is perfect so no worries if not
Trying adding this in your base.css file, you can also add it right below the other code in theme.liquid but wouldn’t recommend it as it’s not good for optimization and also make theme a bit messy
@media (max-width: 767px)
.slideshow__text.banner__box a.button {
padding: 5px 10px !important;
min-width: fit-content;
min-height: 20px !important;
font-size: 12px;
}
}
yeah it didnt seem to change anything, thank you though
Apologies, i missed a bracket there, update that code with this
@media (max-width: 767px){
.slideshow__text.banner__box a.button {
padding: 5px 10px !important;
min-width: fit-content;
min-height: 20px !important;
font-size: 12px;
}
}
1 Like
made the mobile button look perfect so thank you, although my desktop button is a bit small
No worries and did you replace that with the last one, because if you did the desktop one should have been back to the original state.
No, last night I added the code but it did not change anything so I just removed it, but this one made the mobile view perfect but the desktop the same.