Mobile layout

Store Design
1

Hello maybe someone knows code how to do these multicolumn in one line on mobile version

From this

323213.png
323213.png443×905 74.8 KB

To this

image45444.png
image45444.png1418×502 110 KB

Here is url-https://www.toypop.lt

Every help will be appreciated :heart: :heart: :heart:

1 Like
2

@Toypop yes its possible to make signal line can you please just check your theme customization multi column section on mobile enable slider

3

Hello, i want them to show all 4 at once on one screen, without scrolling trough columns. as i shown in the example

4

@Toypop yes its possible but its too much smaller icon and text mobile device

5

Maybe you can show me the code or settings how to try it i will check it out maybe it will look better than the one that is now

1 Like
6

@Toypop yes i can see your enable to mobile slider

KetanKumar_0-1732990414981.png
KetanKumar_0-1732990414981.png538×838 88 KB

7

But we want to put these logos in one line,as PC version, do you know how to do it ?

8

@Toypop do you want like this ?

KetanKumar_0-1733068694685.png
KetanKumar_0-1733068694685.png538×838 125 KB

9

Yes, we want in one line, but without that slider. We need static logos

10

@Toypop yes please disable slider option after i will give you code this

11

Hello

I disabled the slider option, can i get the code please?

Toypop_0-1733140419978.png
Toypop_0-1733140419978.png460×966 81.3 KB

1 Like
12

@Toypop thanks yes please add this code its work

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media (max-width: 749px) {
#shopify-section-template--22284692619529__multicolumn_Ni8mC9 .multicolumn-list {flex-wrap: nowrap;gap: 0;}
#shopify-section-template--22284692619529__multicolumn_Ni8mC9 .grid--2-col-tablet-down .grid__item {width: 25%;}
#shopify-section-template--22284692619529__multicolumn_Ni8mC9  .multicolumn-card__info {padding: 5px !important;}
    }
1 Like
13

Thanks, that worked but now we have problem that text looks not perfect. maybe you know how to edit text size,because shopify gives or to small text or to big,but not that size that we need and we need to edit only on mobile version,pc version i think looks good ?

1 Like
14

@Toypop yes device no more spacing but you have try this code if you have change value as you like

@media (max-width: 749px)  {
#shopify-section-template--22284692619529__multicolumn_Ni8mC9 .multicolumn-card__info h5 {
    font-size: 11px;
}
}