How to change button position for mobile version only?

Store Design

Topic summary

A user seeks to adjust a “Shop Now” button on their Shopify store’s mobile view, specifically wanting to move it down and change its styling to white text with a white outline (no fill).

Initial Request:

  • Reposition button lower on mobile devices only
  • Change button outline to white

Solution Provided:
A helper provided custom CSS code to be added in theme.liquid above the </body> tag. The code uses media queries to target mobile screens and applies:

  • Increased top margin to move the button down
  • White border and text color
  • Transparent background (no fill)

Outcome:
After one iteration to refine the styling (removing the background fill while keeping white text and outline), the solution successfully resolved the issue. The discussion is marked as resolved with the user confirming the fix works as intended.

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

Hi guys! How to change button position for mobile version only?

https://yiwqh6-vk.myshopify.com/

2

Can you please explain me by screenshot? Then we will able to help you.

1 Like
3

I would like to move down the button abit more for mobile view. Could you help me to change the box “shop now” outline into white too please. Your help very much appreciated.

Screenshot 2024-12-29 at 5.02.47 AM.png
Screenshot 2024-12-29 at 5.02.47 AM.png757Ă—1051 1010 KB

4

You can add the below code in theme.liquid above .

Screenshot:

shreyhweb_0-1735420652280.png
shreyhweb_0-1735420652280.png485Ă—652 461 KB

I hope solution will be useful for you. If it’s works then please like the solution and accept it.

Thank you

5

Thank you! But could you help me do only the letter and outline white. No fill please. Thanks in advance.

6

Please replace the whole given code with above code.

Thank you

1 Like
7

You’re a genius! Thank you!

1 Like
8

Welcome always for help.

Thank you