How can I display two collections per row on mobile view?

[yodendaal]

Hello,

I have my collection list set to 3 collections per row, which works on desktop viewing. But in mobile it only shows one no matter how many I select. How do I get the mobile viewing to show 2 per row?

Store url: https://carlo-hayes-designs.myshopify.com

Thanks!

[KetanKumar]

@yodendaal

sorry for that issue can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
   this code apply for after 5 - 6 second

@media screen and (max-width: 375px) {
.collections .collection-wrap, .featured-collections .collection-wrap {
      width: calc(50% - 10px);
    min-width: calc(50% - 10px);
}
}

[yodendaal]

@KetanKumar

Thank you! I pasted the code and it now seems like the text is cut off on the home page collection list as there are 2 collections per row? If it is possible can the collection list rather show 1 collection per row so that it is bigger in mobile view and so that the text is not cut off?

Thanks

[KetanKumar]

@yodendaal

yes please screenshot so i will guide you

[yodendaal]

@KetanKumar

The text are cut off, so I think it would be better to set it to 1 collection per row on mobile only.

[KetanKumar]

@yodendaal

yes current 1 is good thing on mobile proper look

[yodendaal]

@KetanKumar

How do I change it to 1 collection per row OR alternatively how do I stop the text from cutting off when it is 2 collections per row in mobile view? It looks different on different mobile devices?

[yodendaal]

@KetanKumar

I want it to look like this on all different mobile devices, the desktop view looks fine.

[KetanKumar]

@yodendaal

can you please confirm this look?

[yodendaal]

@KetanKumar

I want it to look like this:

[KetanKumar]

@yodendaal

yes please try this code

@media (max-width: 719px) {
.collections .collection .label, .featured-collections .collection .label {
font-size: 20px;
font-weight: normal;
}
}

[yodendaal]

@KetanKumar

Thank you - the text looks perfect now. Is there a way how I can center the third collection because it is left aligned currently?

[KetanKumar]

@yodendaal

yes, please add this code

@media (max-width: 719px) {
.template-index .featured-collections .wrap {
justify-content: center;
}
}

[yodendaal]

@KetanKumar

Can you add some spacing?

[KetanKumar]

@yodendaal

yes please add this code

@media (max-width: 719px) {
.template-index .featured-collections .collection-wrap {
    margin: 0px 5px 10px;
}
.collections .collection .label, .featured-collections .collection .label {padding: 0px;}
}

[yodendaal]

@KetanKumar

Thank you, it works! How can I move the “RINGS” text to the next line?

[KetanKumar]

@yodendaal

i can see the next line

[yodendaal]

@KetanKumar

That’s strange, it looks like this on my mobile device? Do you think it is because of different devices maybe?

[KetanKumar]

@yodendaal

can you please add all code and let me know

[yodendaal]

@KetanKumar

I did add all code. Can you maybe help so that the 3rd collection is full width on mobile?