Change text placement on image banner

Store Design
, ,

Topic summary

A user wants to reposition text and button elements (“new launch” and “view collection”) on their homepage image banner, specifically for desktop view only. They’ve already solved the mobile version but need help moving these elements to the bottom of the banner on desktop.

Two solutions were provided:

  • Solution 1: Modify section-image-banner.css at line 232, replacing existing CSS with a media query that sets background: transparent and top: 37px for the banner box at max-width 947px.

  • Solution 2: Add CSS code to either base.css or section-image-banner.css targeting .banner__content with padding: 0 !important.

Both responses include step-by-step instructions (navigating to Online Store → Themes → Edit Code → Assets) and screenshots showing the expected results. The issue appears solvable through CSS customization without template limitations.

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

Hello. I want to change the text placement and button placement ( “new launch” & “view collection” ) on the main image banner when you acces the site but only on the pc version. on mobile I figured out. I want to place them at the bottom of the image banner but the template doesn’t let me more than it is now.

this is the website:

www.adorcollective.com

pw: geicay

ty

2

Hello @adorcollective
Go to online store ---------> themes --------------> actions ------> edit code-------> go to assets----> section-image-banner.CSS--------> line number 232
check this code

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
  }

and replace with below code

@media screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
        background: transparent;
        top: 37px;
    }
}

the result will be

qw.png
qw.png421×819 146 KB

let me know , if this was helpful
Thanks

3

Hi @adorcollective ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

BSSCommerceB2B_0-1718472925521.png
BSSCommerceB2B_0-1718472925521.png400×195 26.3 KB

Step 2: Search for the file base.css or section-image-banner.css. And add this code snippet to the end of the file.

.banner__content {
    padding: 0 !important;
}

Step 3: Save your code and reload this page.

=>> The result:

BSSCommerceB2B_2-1718473416646.png
BSSCommerceB2B_2-1718473416646.png1919×950 196 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

1 Like