Sticky title, richtext and review

[lunalucenteskin]

Hi everyone, while scrolling on our product pages, the title, richtext and custom liquid which serves as reviews become sticky which we dont want. Can anyone help us, it is for all our product pages.

www.lunalucente.com

[EcomGraduates · Accepted solution]

You’ll need to check the CSS settings or styles applied to the product page. Look for any position: sticky or similar properties and adjust or remove them to stop the content from sticking.

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @lunalucenteskin 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.m-main-product--info .m-product-info--wrapper {
    position: relative !important;
    top: 0px !important;
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[EcomGraduates · Accepted solution]

You’ll need to check the CSS settings or styles applied to the product page. Look for any position: sticky or similar properties and adjust or remove them to stop the content from sticking.

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @lunalucenteskin 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.m-main-product--info .m-product-info--wrapper {
    position: relative !important;
    top: 0px !important;
}

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[dws_pvt_ltd · Accepted solution]

Hello @lunalucenteskin, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. open "product.css"
6. Add the following code at the end of the file. 

Find this below CSS and add new CSS.

.m-main-product--info .m-product-info--wrapper {
    position: sticky; /* remove or comment this line of the CSS old CSS */
    position: static; /* add this line of the CSS new CSS */
    top: 30px;
}

Feel free to reach out if you have any questions or need assistance.

Best regards,

DWS.

[BSS-TekLabs]

Hi @lunalucenteskin,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.m-main-product--info .m-product-info--wrapper {
    position: static !important;
}

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!