Move Shop All Button on Mobile

Solved
cafeconphrases
Visitor
2 0 0

I have been trying different suggestions from the forums, but it seems I only make it worse. I would like to move the "Shop Now" button under my hero image for my MOBILE site. It is fine on desktop right now. The mobile version is hovering over my products. See ss below. Any help is much appreciated. My site is cafeconphrases.com

 

Screenshot_20230720-083348.png

Accepted Solution (1)
BSS-Commerce
Shopify Expert
2820 376 394

This is an accepted solution.

Hi @cafeconphrases ,

 

Your "Show Now" button is displayed in the wrong place in the mobile view due to the following code:

 

@media screen and (max-width: 749px)
.button.button--secondary {
    top: 800px!important;
}

To correct the display as you want, follow these steps:

Themes => Edit code => base.css => Find the above code and edit it as follows:

 

@media screen and (max-width: 749px)
.button.button--secondary {
    top: 28px!important;
}

 

Then press Save.

The results you will get are as follows:

 

view (62).png

 

Hope it's useful to you @cafeconphrases !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

View solution in original post

Replies 2 (2)
BSS-Commerce
Shopify Expert
2820 376 394

This is an accepted solution.

Hi @cafeconphrases ,

 

Your "Show Now" button is displayed in the wrong place in the mobile view due to the following code:

 

@media screen and (max-width: 749px)
.button.button--secondary {
    top: 800px!important;
}

To correct the display as you want, follow these steps:

Themes => Edit code => base.css => Find the above code and edit it as follows:

 

@media screen and (max-width: 749px)
.button.button--secondary {
    top: 28px!important;
}

 

Then press Save.

The results you will get are as follows:

 

view (62).png

 

Hope it's useful to you @cafeconphrases !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

cafeconphrases
Visitor
2 0 0

That worked great. Thank you!