How can I resize and reposition the slideshow button for mobile view?

Store Design

Topic summary

Goal: make the slideshow button smaller and positioned lower on mobile, as it overlaps bullet-point text (image provided for context).

Proposed approaches:

  • CSS change: Add a mobile-only media query targeting .slideshow__button .btn to reduce padding (max-width: 749px). Instruction: Online Store > Themes > Edit code > Assets > index.css and paste the rule. This reduces size but doesn’t explicitly change position.
  • Design workaround: Embed the button into the slideshow image itself (via Photoshop or Canva) so its appearance/placement is fixed across devices.

Follow-ups and issues:

  • The requester couldn’t find index.css and adding the CSS to theme.css.liquid didn’t work, asking for further guidance.
  • Another participant requested the store URL to inspect; the URL (plant-curious.myshopify.com) was provided.
  • Clarification given that “embedded button” means designing it directly into the banner image using a design tool.

Status: Not resolved. Next steps likely include a theme-specific check to locate the correct stylesheet or section for custom CSS, or proceeding with the embedded-button design approach. Repositioning (moving the button lower) remains unaddressed in code so far.

Summarized with AI on February 10. AI used: gpt-5.
1

I’d like to have the slideshow button smaller for mobile view but not sure how to edit the code for this. Ideally, the button could be positioned a bit lower too so it’s not covering the bullet-point copy.

See below:

Mobile Slideshow Button.PNG
Mobile Slideshow Button.PNG430×371 80.1 KB

2 Likes
2

Hi @KyleTShea !

I`m Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendation.

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >index.css and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
.slideshow__button .btn {
padding: 5px 19px !important;
}
}

Best Regards;

Richard-Pagefly

3

@KyleTShea actually, we found it much easier to embed the button into the actual image itself so you do not have to worry about the button position and it will always look exactly as you designed it on any devices.

4

@KyleTShea

can you please send store url so i will check and let you know

5

Hey Richard,

Thanks for the reply. I don’t seem to have an index.css section under Assets. I tried adding your code to the theme.css.liquid but it didn’t work.

Any suggestions?

6

Thanks for the reply, Daniel. How do I embed a button into an image?

7

That needs to be done form Photoshop or Canva. You can ask the banner designer to add the button to the design.

8

Hey @KetanKumar , our Shopify Store URL is plant-curious.myshopify.com . Please advise!