How do I move the button on a slideshow in the envy theme on mobile display?

lookoutpoint
New Member
5 0 0

I am trying to figure out how to move the button label 1 to the bottom center of each slide in the envy theme.

https://www.bbqstylegear.com/ 

 

 

Replies 8 (8)

Hardik2903
Excursionist
55 6 7

@lookoutpoint 

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
.slider-caption.text-align--left .action-buttons {
  justify-content: center;
}
</style>

If my solution works, then please like and accept it as a solution.

lookoutpoint
New Member
5 0 0

When I tried this it moved it to the center, but not the bottom. Is there a way to move it center and bottom?

PageFly-Amelia
Navigator
316 96 138

Hello @lookoutpoint 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

 

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css

Step 3: Add code

 

 

.action-buttons {
    justify-content: center !important;
}

 

Copy

 

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.


Optimize your store’s mobile shopping experience with the Blum theme.

lookoutpoint
New Member
5 0 0

When I tried this it moved it to the center, but not the bottom.  Is there a way to move it center and bottom?

Thanks!

PageFly-Noah
Astronaut
1119 201 220

This is Noah from PageFly - Shopify Page Builder App

 

Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
.slider-caption.vertical-align--bottom {
    bottom: 0px !important;
    display: flex !important;
    justify-content: center !important;
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

lookoutpoint
New Member
5 0 0

This moved it to the center of the image, but did not move it to the bottom.  On mobile it is still center and blocking the product.  Do you have another idea?

Thanks!

TerenceKEANE
Shopify Partner
345 66 58

Hi,

 

I've identified that you're encountering an issue due to the presence of the "important" attribute in some of the previously implemented codes. The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write, I'll help.

 

.slideshow-image-overlay .slider-caption {
    bottom: 0 !important;
    padding-bottom: 0 !important;
}

 

1) Navigate to the 'Edit Code' option in your theme settings, then search for “custom.css” in the search bar.

 

TerenceKEANE_0-1713170739740.png

 

Our Website --- Looking for Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 month!
★ If I helped you, Please don't forget to Like and Mark Solution to the post that helped you.
If my support was a lifeline for you, The COFFEE   would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
lookoutpoint
New Member
5 0 0

Thanks for the help Terence,  it moved the button down very slightly.  But when I adjust the values, regardless of the number I input, it moves it back up to where it was.  Any idea how to fix that?