How to keep product image fixed while scrolling down the description column in DAWN theme

Store Design
1

Screenshot 2024-01-12 at 2.30.09 PM.png
Screenshot 2024-01-12 at 2.30.09 PM.png1028×616 117 KB

2

Hello @Chucklesfaq

can you share store url?

3

It’s not live yet. Any other way @niraj_patel

4

Any other way?

5

@niraj_patel

6

How can I apply customs CSS on it without inspecting it?

7

https://www.chuckles.store/products/afternoon-symphony

Hey can you check now?
@niraj_patel

8

@niraj_patel

9

Hello @Chucklesfaq

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width: 750px){ .product__info-container { max-width: 60rem; overflow-x: auto; height: 400px; } }
10

Hey thanks a lot. It’s working now. Thanks for being so cool here.

11

And if i want the exact contrary?

In my case when i scroll down the page, the description is higher than the image, and the image will scroll down until the footer.

Senza titolo.png
Senza titolo.png1657×1048 312 KB

12

Hey @Chucklesfaq

Yes, we can do it with manipulation to css.

Please ‘inspect’ the image layout and change the css as:
when you scroll down, the images comes:

position: sticky;

But if you want to fix the images on top, please write that css:

position: static!important;

I hope it helps you!