Mobile Display 2 Columns

Site URL: http://urbanvanitylounge.com

I am trying to update my team page and make it into 2 columns for the mobile version instead of 1. I have tried looking through and adding different codes that others have suggested but nothing seems to be helping, if anyone could help me out that would be greatly appreciated. 

The website does have a password: Urban2022! 

The code you're adding might actually be working without you realising -- there's a bug that can interfere with some of the CSS grid code, but it only happens when you're viewing the preview page with the CSS editor open.

Try adding this code and then go out of the CSS editor and refresh the page. You *should* then have two columns on the mobile view. 

@media screen and (max-width: 767px) {
.user-items-list-simple {
    grid-template-columns: repeat(2,1fr);
}
}

With Team Page, add this to Design > Custom CSS

/* Team page - mobile - 2 columns */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="622f6307a009840afb150254"] {
    grid-template-columns: repeat(2,1fr) !important;
    grid-gap: 20px !Important;
}}

Thank you so much, I was able to get it to work!! Is there a way to make it so each artist writeup in the rows match up? 

On 4/6/2022 at 5:50 AM, taylorperduesocials said:

Thank you so much, I was able to get it to work!! Is there a way to make it so each artist writeup in the rows match up? 

Hi,

What do you mean? Can you describe in more detail?

When they're beside each other in 2 rows the length of each card is different sizes. They're not even and it looks messy, I'd like to clean it up so they're all even. 🙂 

Add this new code

@media screen and (max-width: 767px) {
.user-items-list-item-container[data-section-id="622f6307a009840afb150254"] {
   & {
        grid-template-columns:repeat(2,1fr) !important;
        grid-gap: 20px !Important
    }
   li:nth-child(-n+4) .list-item-content__description {
    min-height: 500px !Important;
}
    li:nth-child(n+5) .list-item-content__description {
    min-height: 300px !Important;
}
li:nth-child(n+7) .list-item-content__description {
    min-height: 450px !Important;
}
li:nth-child(n+9) .list-item-content__description {
    min-height: 350px !Important;
}}}