Widen Text Width in Multicolumn Section Dawn Theme

Store Design
1

Hi @LitExtension . Like your solution here that widened the body of the text in Image with Text Section (https://community.shopify.com/post/1557828) is there a way to do the same for Multicolumn Sections in Dawn? On Mobile, the text is to narrow and would be easier to read if wider like your solution in linked thread. Any ideas?

Store: www.theburpboss.com Password: leistu

Kind Thanks!

2

@TheBurpBoss

Welcome to the Shopify community!
Thanks for your good question.
Please share your store URL and screenshot what are you looking exactly.
So that I will check and let you know the exact solution here.

3

To increase the font size you can go to Assets > section-multicolumn.css and paste this at the bottom of the file:

@media only screen and (max-width: 480px) {
  .multicolumn .multicolumn-list .multicolumn-list__item .multicolumn-card__info h3 {
    font-size: 30px;
  }
  
  .multicolumn .multicolumn-list .multicolumn-list__item .multicolumn-card__info .rte {
    font-size: 25px;
  }
}
4

Hi LamQSolutions, thanks for this. It does work to modify font size. However, rather than increase the font size, I’d like to widen the alloted space for the text so that on mobile, the text in each column spans wider, i.e. allows more words to fit per line. @LitExtension was able to provide a solution for this for Image with Text Sections, so hoping the same can be done for Multicolumn Sections. Thanks!

5

hI @Zworthkey , thanks. Store: www.theburpboss.com PW: leistu

In my Dawn Theme Multicolumn Sections, on Mobile, I’d like to widen the alloted space for the text so that more words can fit per line. @LitExtension provided a way to do this for Image with Text Sections and I’m hoping we can accomplish the same outcome for Multicolumn Section. Screenshot attached.

6

Hi @TheBurpBoss ,

I checked and you changed it with “padding: 0 !important;”

Do you want me to check something else?

7

Hi @LitExtension , I did find that 0 padding solution in another thread, however, the downside is it removed the padding on top of course, too, so the heading within each multicolumn sits too near the photo. Is there an alternative or extra line I can add to the asset > section multicolumn to keep the side padding at 0 but add some padding back in between the photo and text? Kind thanks!

8

Hi @TheBurpBoss ,

Please change code:

padding: 0 !important;

=>

padding: 2.5rem 0rem !important;

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.