Problems with Multicolumn Text Spillover on Mobile

[HighTide_Ceylon]

The body of text on my Shopify website in the multi-column section of my mobile website shows the text broken into two layers in a disorderly manner. Is there anyway I can adjust the size to ensure the text is broken into two layers in an organized manner. Eg: The two words 'Expertly Roasted' needs to be broken into two levels so that the words are stacked over each other. 'Expertly' on top and 'Roasted' at the bottom.

www.hightideceylon.com

[MR115_ShopiDevs · Accepted solution]

1. Log in to your Shopify Admin Panel
2. Go to: Online Store > Themes
3. Find your current theme (e.g., Dawn theme).
4. Click "Actions" and select "Edit Code"
5. In the left-hand sidebar, locate the "Assets" folder.
6. CSS files (e.g., base.css, theme.css)
7. Add the provided code at the end of the file.

@media only screen and (max-width: 414px) {
  .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
      padding-left: 1rem;
  }
  .multicolumn-list h3, .multicolumn-list p {
      word-break: break-word;
      font-size: 20px;
  }
}

After applying this CSS file, the appearance has been updated as follows.

If this helped, don't forget to Like it and Mark it as a Solution!

[usmanimar]

reduce the size of the text and it'll fit.

[HighTide_Ceylon]

Thanks bro. I had not thought of that.

[GTLOfficial]

Hello @HighTide_Ceylon 
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

h3, .h3 {
font-size: calc(var(--font-heading-scale) * 1rem);
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[WebDeskSolution]

Hello @HighTide_Ceylon 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css
• Insert the provided CSS code at the end of the file and save the changes.

@media only screen and (max-width: 479px)
{
    .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info
    {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
    .multicolumn-list h3
    {
        word-break: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        font-size: 16px;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.