How can I force 3 rows on mobile for carousel view?

Attached is the desktop vs mobile. I’m trying to get mobile to show 3 rows across too.

(Ignore the repeat of images, I just haven’t inputted all of them yet)

6 hours ago, ThisWayToFabulous said:

Attached is the desktop vs mobile. I’m trying to get mobile to show 3 rows across too.

(Ignore the repeat of images, I just haven’t inputted all of them yet)

Kindly share your site with the protected password to check it together

@bangank36 no password, just a temp link for now while being built.

star-buffalo-56ld.squarespace.com

51 minutes ago, ThisWayToFabulous said:

@bangank36 no password, just a temp link for now while being built.

star-buffalo-56ld.squarespace.com

I've tried but your site is private now, kindly give it a protected password and share it with us to check your issue

@bangank36 try again with password: tamara

@ThisWayToFabulous Add to Design > Custom CSS > Then save & reload the site

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] ul {
    grid-template-columns: repeat(3,1fr) !important;
}
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] h2 {
    font-size: 17px !important;
}
}

@tuanphan thank you!! This is a huge help.

Is there a way to better shrink all of the items proportionally? So the caption and buttons also size down?

On 12/1/2021 at 8:11 PM, ThisWayToFabulous said:

@tuanphan thank you!! This is a huge help.

Is there a way to better shrink all of the items proportionally? So the caption and buttons also size down?

Use this new code

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] {
ul {
    grid-template-columns: repeat(3,1fr) !important;
}
h2 {
    font-size: 17px !important;
}
a.list-item-content__button {
    font-size: 8px !important;
}}
}

@tuanphan thank you!!!!

One more level of this, im so sorry!

• How can i specifically shrink the "makeup artist" part of the text? 
• Also, can i make the pink button "meet the team" also shrink to one line?
• Can i make the "magic behind the brushes" title also shrink down to only one line?

On 12/6/2021 at 9:22 AM, ThisWayToFabulous said:

@tuanphan thank you!!!!

One more level of this, im so sorry!

• How can i specifically shrink the "makeup artist" part of the text? 
• Also, can i make the pink button "meet the team" also shrink to one line?
• Can i make the "magic behind the brushes" title also shrink down to only one line?

Sorry for delay. Use this new CSS

/* Homepage Mobile Carousel */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="61a3f20b4d0dd626ec6305de"] {
ul {
    grid-template-columns: repeat(3,1fr) !important;
}
/* title */
h2 {
    font-size: 17px !important;
}
/* makeup artist */
.list-item-content__description * {
    font-size: 14px;
}
/* the magic behind */
.list-section-title p {
    white-space: nowrap !important;
    font-size: 16px;
}
a.list-item-content__button {
    font-size: 8px !important;
}}
}