How can I make text fit inside a border on a minimized screen?

Store Design
, , , ,

Topic summary

Text overflow within a bordered container on smaller screens in a Shopify Turbo theme.

  • The poster reports text does not fit inside the border when the browser is minimized, while it looks correct in fullscreen. They provided a custom CSS snippet and screenshots comparing minimized vs fullscreen layouts.

  • Two participants requested the store URL (and password, if applicable) to review the issue directly.

  • A suggested fix recommends adding CSS in Sections > main-collection-product-grid.liquid to define a .container with max-width: 100%, a 1px border, padding, and word-wrap: break-word, then saving and previewing. This is intended to enforce text wrapping within the container on narrow viewports.

  • No confirmation yet that the change resolves the problem; the thread remains open pending access to the store or feedback from the original poster.

  • The attached images are central to understanding the difference between minimized and fullscreen behavior.

Summarized with AI on January 28. AI used: gpt-5.
1

Hello, I am trying to make the text fit inside the container border when the screen is minimized. It does display correctly when browser is fullscreen. This is the code I am using and the current result:

Custom CSS Code (Turbo Theme):

h3 {
  color: #e44d93;
  font-weight: bold;
}
p {
  color: #e44d93;
}
.title {
  color: #e44d93;
  font-weight: bolder;
}
strong {
  color: #3c3f4a;
}
.action_button {
  color: #e44d93;
  font-weight: bold;
  border-block-color: #e44d93;
  border-left-color: #e44d93;
  border-right-color: #e44d93;
}

Minimized Browser:

biznazz101_1-1681866988626.png
biznazz101_1-1681866988626.png1659×2015 359 KB

Fullscreen Browser:

biznazz101_2-1681867028270.png
biznazz101_2-1681867028270.png2488×1874 478 KB

Thanks for the help everyone!

2

Hi,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.

3

Hello @biznazz101 ,

You can try to follow these steps:

Go to Online Store → Theme → Actions → Edit code

Screen Shot 2023-04-10 at 11.13.01.png
Screen Shot 2023-04-10 at 11.13.01.png1433×764 109 KB

Go to Section folder → main-collection-product-grid.liquid → add this following code

.container {
  max-width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  word-wrap: break-word;
}

Save and preview

Hope this can help you out.

Ali Reviews team.

1 Like
4

Hi @biznazz101
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.