How can i get more than 2 columns or rows on the sense theme homepage?

[grumpycookies]

Hey everyone!

So I need help on how to be able to show more links on my homepage, horizontally. Right now all I can do is 2 next to each other and underneath, 2 more. These photos link to our womens, men's, etc collections. But I would love the tiles (currently switching from square to circle) to be smaller and to have 4 or 5 in a row. Can anyone help me with the correct coding please? A bonus would be how to also get rid of the collection name under each pic. Thank you so much!!!!

 

[Moeed]

Hey @grumpycookies 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[grumpycookies]

Www.thegrumpycookies.com

No password needed.

[Moeed]

Hey @grumpycookies 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
section#shopify-section-template--23113058255143__collection_list_UYhK7w .grid__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) / 4) !important;
}
section#shopify-section-template--23113058255143__collection_list_UYhK7w h3.card__heading {
    font-size: 15px !important;
    white-space: nowrap !important;
    right: 7px !important;
    position: relative !important;
}
section#shopify-section-template--23113058255143__collection_list_UYhK7w span.icon-wrap {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[grumpycookies]

i tried this and it didn't work 😞 

i've done coding for this sense theme and dawn theme, so i definitely understand the directions. it's just not working. did i do something wrong?

[Dan-From-Ryviu]

Hi @grumpycookies 

Please add more collections under Collection list section on your Online Store > Themes > Customize 

[DaisyVo]

Hi @grumpycookies 

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3: 

@media screen and (max-width: 768px){
ul.collection-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0 !important;
}
ul.collection-list .card__content {
    display: none !important;
}
ul.collection-list li.collection-list__item {
    width: 100% !important;
    max-width: unset !important;
}
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada Support Team.

[grumpycookies]

hiii!!! this actually halfway worked 🙂 i do end up getting 4 picture links in a row. but they aren't clickable 😞 when i test it out... it just doesn't take me anywhere 😞

EDIT: because i am not publishing this yet... i'm only testing in shopify. i retried and on the desktop version, it did work... so i'm hoping it will work on the mobile phone version when i publish it!

[DaisyVo]

Hi @grumpycookies 

Could you please replace my code above with this one? 

@media screen and (max-width: 768px){
ul.collection-list.contains-card.contains-card--collection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0 !important;
}
ul.collection-list.contains-card.contains-card--collection .card.card--card.card--media h3.card__heading > a {
    font-size: 0px;
}
ul.collection-list.contains-card.contains-card--collection .card.card--card.card--media h3.card__heading > a > span.icon-wrap {
    display: none !important;
}
ul.collection-list.contains-card.contains-card--collection .card.card--card.card--media .card__information {
    padding: 0 !important;
}
ul.collection-list.contains-card.contains-card--collection .card.card--card.card--media .card__content {
    padding: 0 !important;
}
ul.collection-list li.collection-list__item {
    width: 100% !important;
    max-width: unset !important;
}
}

Please let me know if it works. Thank you!

Best,

Daisy - Avada 

[namphan]

Hi @grumpycookies,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
.section-template--23113058255143__collection_list_UYhK7w-padding .collection-list__item {
    width: calc(20% - var(--grid-mobile-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-mobile-horizontal-spacing) * 4 / 5);
}
.collection-card-wrapper {
    border-radius: 100%;
    overflow: hidden;
}

.collection-card-wrapper .card__content {
    display: none;
}
}

[namphan]

Hi @grumpycookies,

You just add my code it will show like this:

@media screen and (max-width: 749px) {
.section-template--23113058255143__collection_list_UYhK7w-padding .collection-list__item {
    width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
    max-width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
}
.section-template--23113058255143__collection_list_UYhK7w-padding .collection-card-wrapper {
    border-radius: 100%;
    overflow: hidden;
}

.section-template--23113058255143__collection_list_UYhK7w-padding .collection-card-wrapper .card__content {
    display: none;
}
}