Why does text overflow the rectangle at 1200 px screen width?

Store Design

Topic summary

A user is experiencing a CSS layout issue where text overflows its container at 1200px screen width, while below 799px the text doesn’t display as a block element.

Problem Details:

  • Text overflow occurs specifically at 1200px viewport width
  • Below 799px, text fails to display in block format
  • Screenshots provided showing the overflow issue

Proposed Solution:
A respondent suggests adding CSS code to the styles.scss.css file via Shopify Admin:

  • Navigate to: Online Store > Themes > Actions > Edit Code
  • Add a media query targeting max-width 1199px
  • Apply width: 90% !important to .content-padd p elements

The discussion appears to be ongoing, awaiting confirmation whether the suggested CSS fix resolves the responsive design issue.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello Experts,

When the screen width is 1200 px, the text overflows the rect

Screenshot 2022-12-01 140733.png
Screenshot 2022-12-01 140733.png596×359 12.4 KB

When its below 799 the text is not display in block

Screenshot 2022-12-01 140256.png
Screenshot 2022-12-01 140256.png704×186 8.69 KB

What am i doing wrong.

here is the page link: https://www.athreyaherbs.com/pages/shilajit

Thank you for your help.

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >styles.scss.css and paste this at the bottom of the file:
@media screen and (max-width: 1199px){
.content-padd p {
width: 90%!important;
}
}

Screenshot :- https://prnt.sc/20SiA27by_LT

1 Like