Change text placement on image banner

Store Design
, ,
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