How can I adjust the multicolumn section size on mobile in the Sense theme?

[dtc1]

Hi,

I’m using the sense theme and the multicolumn section is too large on mobile. On desktop the columns fit horizontally, I would like it to be horizontal on mobile also. How can this be achieved?

Site url: cladiegirl.com

Referring to colum “Easy as ABC”

[niraj_patel]

@dtc1

Hello,

Please add this code above in theme.liquid for fit box on mobile view.

layout >> theme.liquid

@media screen and (max-width: 767px){ .multicolumn-card__info { padding: 5px!important; } .multicolumn-card__info h3 { font-size: 16px!important; } .multicolumn-card__info p { font-size: 11px!important; } .grid--1-col-tablet-down .grid__item { width: 100%; max-width: 33.33%!important; padding: 5px!important; } ul.multicolumn-list.contains-content-container { flex-wrap: nowrap; column-gap: 0px; padding-left: 5px; padding-right: 5px; } }

after looks on mobile,

But i suggest, this look is not good on mobile but as your wish you want to this look on mobile then you can use the given code.

[shanakbar]

Hi I have attached screen shots, you can edit you multicolumns settings from your theme customize
go to your shopify admin > onlinStore > live theme customize then on desktop select multicolumn section and adjust your image width and orientation as described in screen shot. You can also adjust multicolumns settings on mobile, like showing only 1 column on mobile and enabling swipe on mobile. You can show multicolumns as horizontal on mobile, but at max 2 columns per row (please see attached screenshot). Hopefully this will help. Thanks!

[dtc1]

Thank you so much, this was helpful. However I still would like to create something like the screenshot below for mobile. Is that possible? Without people having to swipe.

[shanakbar]

Yes you can do this, by adding some custom code.

I would suggest first take copy of live theme, then add these changes in copied theme, then check if it is working fine, by opening draft theme’s preview. If everything is correct then publish copied theme to live.
First go to store admin > OnlineStore > click three dots on coped theme > click on code edit.
search for file “section-multicolumn.css” in assets folder. Open the file and find following code:

@media screen and (max-width: 749px) {
  .multicolumn-list {
    margin: 0;
    width: 100%;
  }

  .multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

and replace this code with following code:

@media screen and (max-width: 749px) {
  .multicolumn-list {
    margin: 0;
    width: 100%;
  }

  .multicolumn-list:not(.slider) {
    flex-wrap: nowrap !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .grid--1-col-tablet-down .grid__item {
    width: 0 !important;
  }
  
  .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info{
    padding: 0 !important;
  }

  .multicolumn-list h3{
    font-size: 14px !important;
  }

  .multicolumn-list p{
    font-size: 12px !important;
  }
}

And save the file.
And also update these settings to “1 column on mobile” and “swipe is off on mobile”(see screen

shot).

Final results looks linke this:

I hope this will help.
Thanks.
Regards: Shan Akbar.

[dtc1]

Thank you. I have 2 multicolumns but I would only like to do this for 1 section. How can I achieve this?

[shanakbar]

Update code with this:

@media screen and (max-width: 749px) {
  .multicolumn-list {
    margin: 0;
    width: 100%;
  }

  .multicolumn-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  #shopify-section-template--17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87 .multicolumn-list:not(.slider) {
    flex-wrap: nowrap !important;
  }

 #shopify-section-template--17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87 .grid--1-col-tablet-down .grid__item {
    width: 0 !important;
  }
  
 #shopify-section-template--17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87 .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info{
    padding: 0 !important;
  }

 #shopify-section-template--17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87 .multicolumn-list h3{
    font-size: 14px !important;
  }

 #shopify-section-template--17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87 .multicolumn-list p{
    font-size: 12px !important;
  }
}

I have added the section id #shopify-section-template–17687809229110__127eb9d7-c615-483c-8d61-dd9dbbc5cf87
This will apply only on “Easy as ABC” Section

[dtc1]

Sorry I don’t want it to appear in the “Easy as ABC” section. I’m creating
a new section, how do I edit the code?

[shanakbar]

When you add a new section, after saving, you can get section id from inspect element, like this

you can open inspect elements on chrome by following keys “CTRL + Shift + i”.
Cmd + Option + I for macOS users.