How can I adjust button placement on mobile view?

Store Design

Topic summary

A user encountered a button overlapping text on mobile view and wanted to reposition it to the bottom of the screen. They provided a screenshot showing the issue.

Solution provided:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Open Asset → theme.scss.css
  • Add CSS code at the bottom targeting .slideShow__Content with a media query for max-width 992px and top positioning at 80%

Outcome:
The CSS solution successfully resolved the overlap issue. The discussion is marked as resolved with the original poster confirming it worked.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Good day can you guys help with this button as it is overlap with the text on mobile.> > I would like it to go to the bottom.> >

Screenshot_20230526_125116_com.android.chrome.jpg
Screenshot_20230526_125116_com.android.chrome.jpg1080×2340 104 KB
> > Here is the store link> > https://nonstop-energy.myshopify.com/?_ab=0&_fd=0&_sc=1

Password: yeisho

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.css and paste this at the bottom of the file:
@media (max-width: 992px) {
.Slideshow__Content {
    top: 80%;
}
}

ZestardTech_0-1685103442143.png
ZestardTech_0-1685103442143.png960×668 84.5 KB

3

Thanks a lot bro it worked :handshake: ? :folded_hands:t4:

1 Like
4

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.