How can I fix link placement issues on my mobile site?

Store Design
,

Topic summary

A user encountered a link placement issue on their mobile site where the ‘Size Guide’ link appeared lower than desired on the product page’s size variant section, despite being correctly positioned on desktop. The site uses the Motion template.

Solution provided:

  • Add custom CSS code to the customized-styles.css file in the theme’s Asset folder
  • The CSS targets the sizing chart container specifically for mobile viewports (max-width: 1024px)
  • Applies a negative top margin (-190px) to reposition the element

Outcome:
The CSS fix successfully resolved the positioning issue. The user confirmed the solution worked as intended.

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

Hello Shopify Experts :slightly_smiling_face:

There is a ‘Size Guide’ link on my websites product page, while it’s in the correct spot in desktop version, the mobile is a bit lower than where we’d like it– it’s placed on the size variant.

I tried to do a @media @mobile run but nothing helps it.

Template: Motion

Website: https://copper-88-2022.myshopify.com/collections/womens-clothing/products/ladies-copper-compression-short-sleeve-shirt

Password: Meashi

Thank you in advance!

Screen Shot 2022-12-09 at 4.36.17 PM.png
Screen Shot 2022-12-09 at 4.36.17 PM.png384×532 25.7 KB

1 Like
2

@sincerelyjoie

oh sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/customized-styles.css ->paste below code at the bottom of the file.
@media (max-width: 1024px) {
body.template-product .ks-chart-container.sizing-chart-container.ks-container-with-modal
{top: -190px !important;}
}
1 Like
3

Thank you so much!!

1 Like
4

@sincerelyjoie

its my pleasure to help us