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

[lookoutpoint]

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/ 

[Hardik2903]

@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]

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]

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

[lookoutpoint]

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]

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

[lookoutpoint]

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]

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.

[lookoutpoint]

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?