How can I modify the position and style of my 'Shop Now' button?

[rogerjet]

Hi,

I am trying to change the style of my Shop now button on the banner of my home page.

I changed here in the section-image-banner.css.

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
background: transparent;
--color-foreground: 255, 255, 255;
--color-button: 0, 0, 0;
--color-button-text: 255, 255, 255;

And that worked for mobile site but not desktop. Where do I change the desktop setting??

Also want to push it further down the image on the mobile site id did add this code to the section-image-banner.css.

@media screen and (max-width: 749px) {
.banner__content {
align-items: end;

But I want it to go further down.

my site is swaace.com

Thanks in advance for any help.

[GemPages]

Hello @rogerjet

I would like to give you some recommendations to support you.

1/ I checked. The code you added to make style for the Buy Now button only apply for screens smaller than 749px. Because this code is in a media query as shown in the below image.

You can move this code to the end of the file outside the media query.

Or add this code in media query for desktop.

2/ You can add below code to reduce this padding-bottom. https://prnt.sc/WSFd8Le4WMQ5

.banner__content .banner__box{
   padding-bottom: 10px;
}

Add to location like image (watch out for syntax errors when adding code):

Hope my recommendations can works and support for you.
Kind & Best regards,
GemPages Support Team

[rogerjet]

Hi @GemPages thanks for your input.

1/ I checked. The code you added to make style for the Buy Now button only apply for screens smaller than 749px.

Because this code is in a media query as shown in the below image.

You can move this code to the end of the file outside the media query.

That didn’t work

Or add this code in media query for desktop.

I cant workout where that is…

2/ worked perfect thanks.

[GemPages]

@rogerjet

In the issue 1, you can try adding your code in here (Add at line 329):

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
    background: transparent;
    --color-foreground: 255, 255, 255;
    --color-button: 0, 0, 0;
    --color-button-text: 255, 255, 255;
  }

Kind & Best regards,
GemPages Support Team

[rogerjet]

Hi @GemPages ,

Thanks perfect…sorry but 1 more question how to change the button outline colour?

[GemPages]

Hi @rogerjet

I’m glad you were able to resolve the above issues.

The outline button color will change with the button text color.

You can change color here in the code you added. https://prnt.sc/waQziXJVdCCW

If you want to change only the button outline color, then you can try add the below code at the end of the file.

.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box .button:after,
.banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box .button:not([disabled]):hover:after{
  box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) #895999,0 0 0 var(--buttons-border-width) rgba(var(--color-button),var(--alpha-button-background));
}

You can change color at here:

GemPages Support Team