Problem with mobile product page

Store Design
,
1

My website is TuneToyz.com And I am having a problem with my product page on mobile the image is misplaced can someone please help me fix. There is a lot of space between the top header and the bottom price.

TuneToyz_0-1721875921822.png
TuneToyz_0-1721875921822.png349×598 56.7 KB

2

Hi @TuneToyz ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721876970995.png
BSSCommerceHDL_0-1721876970995.png804×813 119 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hi @TuneToyz

This code caused the issue. Please find and remove it from where you added the code to solve the issue

.flickity-lazyloaded { transform: translateY(-90px); }
4

Hello @TuneToyz
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
and add this code at the end of the file.

.flickity-slider {
top: 80px !important;
}

and the result will be

8.png
8.png458×853 89.1 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks