What's your biggest current challenge? Have your say in Community Polls along the right column.

Margin customization in my renza theme

Margin customization in my renza theme

Arjun26
Tourist
9 0 3

In my renza theme , some of the text exceeding it limits and crossing the side margin in mobile responsive, please refer the attached ss, can anyone help me to solveScreenshot (6).png

Reply 1 (1)

rajweb
Shopify Partner
431 40 66

Hey @Arjun26 ,

It looks like the text in the "Specifications" section is exceeding its container's boundaries, which is causing the scrollbar to appear. This issue can often be fixed by adjusting the CSS for that container to make it responsive and fit within mobile screens.

ry adding the following CSS to your theme's custom CSS file or directly in your theme's style file:

@media only screen and (max-width: 767px) {
    .product-specifications { /* Replace .product-specifications with the actual class if different */
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        padding: 0 15px; /* Adjust the padding as needed */
    }
}

This code will ensure the text doesn't overflow the container and will wrap properly on smaller screens. If the "Specifications" container has a different class, replace .product-specification with the appropriate class name.

If this doesn't fully resolve the issue, let me know, and we can try some other CSS adjustments.

 

 

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

-Need a Shopify developer?
https://rajatweb.dev/
Email: rajat.shopify@gmail.com