Text overflow issue between multicolumns on mobile (text from one column overlaps the next)

Store Design
, ,

Topic summary

A Shopify store owner using the Dawn theme encountered a mobile layout problem where text from one column overflows into adjacent columns, creating readability issues.

Problem Details:

  • Issue occurs only on mobile devices
  • Text overflow between multicolumn sections
  • Suspected causes: margins, padding, or column width settings
  • Three screenshots were provided showing the overlap

Solution Provided:
A CSS fix was offered targeting mobile viewports (max-width: 767px):

  • Add overflow: hidden to .multicolumn-card
  • Set width to 95%
  • Code to be inserted at the end of base.css file

Outcome:
The issue was resolved. The original poster confirmed the solution worked and thanked the helper.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I’m having a layout issue on my Shopify store (Dawn theme) and I’m hoping you can help me resolve it.

On the mobile version of my store, the text from one column overflows into the next column. This makes the content weird to read and negatively impacts the overall appearance of the page. The issue seems to be related to margins, padding, or column width, but I can’t pinpoint the exact cause…

Thank you in advance for your help!

IMG_5444.jpg
IMG_5444.jpg1290×1926 78.2 KB

IMG_5445.jpg
IMG_5445.jpg1290×1916 63.2 KB

IMG_5446.jpg
IMG_5446.jpg1290×1998 88.9 KB

2

Hey @Tvreport please share your Store URL and password (If applicable) so that I provide you solution code.

3

Hello thank you for your answer,

here is the link of my store : https://hz0r5q-rp.myshopify.com/?_ab=0&_fd=0&_sc=1

The password : franceparis

4

paste this code in the end of base.css file.

@media only screen and (max-width: 767px){
.multicolumn-card{
    overflow: hidden !important;
    width: 95% !important;
}
}
1 Like
5

Thank you a lot for your precious help.

All the best!

6

I am happy that I would help you :blush: .