Margin customization in my renza theme

Store Design
,

Topic summary

Mobile text overflow in the Renza theme causes content in the product “Specifications” section to cross side margins and trigger a horizontal scrollbar. A screenshot was provided and is central to understanding the layout issue.

Proposed fix: add a mobile-specific CSS media query (max-width: 767px) targeting the specifications container (e.g., .product-specifications). Apply text-wrapping properties (overflow-wrap/word-wrap/word-break), set white-space to normal, and add horizontal padding (e.g., 0 15px) so text wraps and fits within the container.

Key implementation note: ensure the CSS selector matches the actual class used by the theme for the specifications block.

Expected result: text wraps properly on smaller screens and no longer exceeds the container or creates a scrollbar.

Status: No confirmation of resolution yet; the responder is open to providing further CSS adjustments if needed.

Summarized with AI on December 14. AI used: gpt-5.
1

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 solve

Screenshot (6).png
Screenshot (6).png1147×793 45.5 KB

2

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