Solved

Slide Button

urbantannery
New Member
9 0 0

Hi, I have a question. On mobile, the button is currently in the middle of the image. can I move it to the bottom?

I have it set up as "bottom center" in desktop version. but it's still in the middle of the slide on mobile version.

 

WhatsApp Image 2024-03-30 at 04.16.15_5787d82b.jpg

Accepted Solutions (2)

PageFly-Oliver
Astronaut
840 176 156

This is an accepted solution.

Hi @urbantannery ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media screen and (max-width: 749px){
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
align-items: flex-end !important;
}}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | 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.

View solution in original post

LuffyOnePiece
Shopify Partner
329 58 57

This is an accepted solution.

Hi @urbantannery ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find base.css file
4) Add the following code at end of base.css file

@media screen and (max-width: 749px){
    .slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width {
    align-items: flex-end;
    }
}

 

Result:

LuffyOnePiece_0-1711765356120.png

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

 

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184

View solution in original post

Replies 2 (2)

PageFly-Oliver
Astronaut
840 176 156

This is an accepted solution.

Hi @urbantannery ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
@media screen and (max-width: 749px){
.banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
align-items: flex-end !important;
}}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | 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.

LuffyOnePiece
Shopify Partner
329 58 57

This is an accepted solution.

Hi @urbantannery ,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find base.css file
4) Add the following code at end of base.css file

@media screen and (max-width: 749px){
    .slideshow__text-wrapper.banner__content.banner__content--bottom-center.page-width {
    align-items: flex-end;
    }
}

 

Result:

LuffyOnePiece_0-1711765356120.png

 

If you require further help to optimize or customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

 

Best Regards,
LuffyOnePiece

 

 

Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184