Shop now button not appearing on mobile landing page

Store Design
,
1

Hi,

The shop now button doesn’t appear on the landing page on mobile. Is it possible to bring it up?

Theme: Sense

Url: www.breeprobiotics.co.za

See pics below

WhatsApp Image 2022-12-05 at 10.06.24 (1).jpeg
WhatsApp Image 2022-12-05 at 10.06.24 (1).jpeg750×1334 84 KB

WhatsApp Image 2022-12-05 at 10.06.24.jpeg
WhatsApp Image 2022-12-05 at 10.06.24.jpeg750×1334 73.2 KB

2

Hello @Mike22288804

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media(min-width: 280px) and (max-width: 767px){
.announcement-bar__message {
width: 90% !important;
text-align: left !important;
margin-left: 0px !important;
font-size: 11px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}

#shopify-section-template–16032250396859__image-with-text .image-with-text–overlap .image-with-text__content {
margin: -8rem auto 0;
}
}

3

Hiii @Mike22288804
You can try this code by following these
steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){
    #ImageWithText--template--16032250396859__image-with-text a.button.button--primary {
    display: none;
  }
}
4

Hey @Mike22288804 , the thing is that you will have to change the button code..

5

Thanks for the help, but unfortunately it didn’t work.

6

Thanks, but unfortunately it didn’t work.

7

Thanks Mark,

How do I go about that?

8

@Mike22288804

Go to Online store >> Edit code >> Assets >> base.css
Add this code below of base.css file

@media(min-width: 280px) and (max-width: 767px){
.announcement-bar__message {
width: 90% !important;
text-align: left !important;
margin-left: 0px !important;
font-size: 11px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}

#shopify-section-template--16032250396859__image-with-text .image-with-text--overlap .image-with-text__content {
margin: -8rem auto 0;
}
}
9

Thanks, I’ve tried this and it didn’t work.

10

@Mike22288804

  1. Go to Online Store-> Theme-> Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before :
<style>
@media(min-width: 280px) and (max-width: 767px){
.announcement-bar__message {
width: 90% !important;
text-align: left !important;
margin-left: 0px !important;
font-size: 11px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}

#shopify-section-template--16032250396859__image-with-text .image-with-text--overlap .image-with-text__content {
margin: -8rem auto 0 !important;
}
}
</style>