Adjust collection list text and mobile view

[JordiP]

Hello, I have customized my collection list to appear slightly differently, however there are still changes I need to make. I need to make the collection name text white, slightly bigger and better positioned like in the example below.

Additionaly, I want to adjust the mobile view so the collections appear in a 2x2 format there, an example is also included below.

( ^ Right now collection names are barely visible, need to change them)

( ^ This is what I want the text to look like instead)

Here whats needed for mobile:

( ^ This is how the collection list looks on mobile currently, would be nice to change text to white and lift it a little so its more centered. Would also want to remove scrolling function, and just have a 2x2 like in the example below)

( ^ This is how I would like the collection list to look on mobile, 2x2 format, no scrolling/carrousel)

Any and all help appreciated, thank you!

Store: https://artisimo.es/

Pass: pongia

[EvinceDev]

Hello @JordiP ,

Would you please share your Store URL website? with password if its unpublish. Thanks!

[JordiP]

Store: https://artisimo.es/

Pass: pongia

[Made4uo-Ribe]

Hi @JordiP 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-list h3.card__heading {
        color: white;
        font-size: 20px; 
    }
.collection-list-wrapper .card__content {
        position: absolute;
        bottom: 50px !important;
    }

@media only screen and (max-width: 749px){
.collection-list-wrapper .slider {
        overflow-x: hidden;
        scroll-snap-type: inline;
        gap: 0;
    }
.collection-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

.collection-list-wrapper .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 100% !important;
        max-width: 100%;
    }
.collection-list .grid__item:first-of-type {
        margin-left: 0rem !important;
    }
    
.collection-list.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
        padding-bottom: 0;
        padding-top: 0;
    }

.section-collection-list .slider-buttons {
        display: none;
    }
}

• And Save.
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[JordiP]

Thank you! Is it possible to adjust the positioning of the text on both desktop and mobile? And to remove the gap in the 2x2 for mobile?

( ^ I would like the text moved up slightly and in a slightly bigger font so its easier to read on desktop specifically.)

For mobile:

( ^ I would like to remove the white gap in between the 2x2, and adjust all the text positioning slightly higher so that atleast the "Pintura Inspirada" section fits into the image.)

[Made4uo-Ribe · Accepted solution]

Can transfer the code to the other file? Check the instruction below. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"

2. Find the theme that you want to edit and click on "Actions" and then "Edit code".

3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.collection-list h3.card__heading {
        color: white;
        font-size: 20px; 
    }
.section-collection-list .card__content {
        position: absolute;
        bottom: 50px !important;
    }

@media only screen and (max-width: 749px){
.collection-list-wrapper .slider {
        overflow-x: hidden;
        scroll-snap-type: inline;
        gap: 0;
    }
.collection-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

.collection-list-wrapper .slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        width: 100% !important;
        max-width: 100%;
    }
.collection-list .grid__item:first-of-type {
        margin-left: 0rem !important;
    }
    
.collection-list.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
        padding-bottom: 0;
        padding-top: 0;
    }

.section-collection-list .slider-buttons {
        display: none;
    }
}
</style>

And Save. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[JordiP]

Thank you so much!