How to fix shop button placement issues on mobile?

Store Design
,
1

Hi everyone,

First what a fantastic community and wonderful resource!

We are using the Taste theme on the current version (12.0.0) and have been trying for what seems like weeks to add a simple Shop button to our landing page at www.cibarefoods.com. The placement, location, and size look great on a desktop but on a mobile device the button moves up on the page and obscures the copy. Additionally the button appears to not be scaling correctly (it’s huge). I know others have reported a similar problem where the solutions have been to insert code in either base.css or section-image-banner.css. For some reason none of the solutions (so far) are working for us. I’d be grateful to anyone who could provide some insight. Thank you!

Desktop:

Jpa1_0-1699486771804.png
Jpa1_0-1699486771804.png2652×1322 441 KB

Mobile:

Jpa1_1-1699486940713.png
Jpa1_1-1699486940713.png660×1374 386 KB

2

Hi @Jpa1 Foremost this is an asset design problem that doesn’t account for how it will be used.

Your trying force a billboard onto a leaflet.

Simplest approach is to redo the banner to be aware it will have web elements incorporated with it.

Alternative some themes have settings for a mobile specific version, check for that and make that asset. This can also be done as an advanced theme customization.

CSS band-aid using a custom-css setting:

@media screen and (max-width: 749px) {
 .banner__buttons button a.button  {
     top: 37px;
     position: relative;
     min-width: calc(9rem + var(--buttons-border-width) * 2) !important;
     min-height: calc(2.5rem + var(--buttons-border-width) * 2) !important;
 }
}

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

the !important declarations may or may not be needed.

If you need this design fleshed so the branding is better or customized then contact me by mail for services.

Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @Jpa1 , is this the desired result:

Abdosamer_0-1699489635010.png
Abdosamer_0-1699489635010.png481×360 81.5 KB

4

Hi, yes that looks correct

5

okay, Navigate to base.css file and add the following code :

@media (max-width : 768px){
   .banner__buttons   .button.button--primary  {
     
              padding : 0 1.5rem;
              min-width: calc(7rem + var(--buttons-border-width) * 2);
              min-height: calc(3.3rem + var(--buttons-border-width) * 2);
              top : 5rem;
   }

 }
6

Thanks so much!

7

Glad I helped, feel free to contact me if you need help with customizations of your store.