Problems with Multicolumn Text Spillover on Mobile

Shopify Discussion
1

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

2
  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.

multicolumn-output-2.png
multicolumn-output-2.png402×655 77.8 KB

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

3

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

4

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

19.png
19.png346×427 89.7 KB

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

5

Thanks bro. I had not thought of that.

6

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.