Making 2 column desktop view into 1 column on mobile

Site URL: https://www.scotteubank.com/

Hi, I would like to have a 2 column desktop view but then only 1 column on mobile for my photo galleries. Is there a way to code this? My website is scotteubank.com and the password to enter is yes1. The first screenshot I have attached is how the desktop looks now. The second screenshot shows how I want the mobile view to look. Right now it is still 2 columns on the mobile view. Thanks!

21 hours ago, scooter713 said:

Site URL: https://www.scotteubank.com/

Hi, I would like to have a 2 column desktop view but then only 1 column on mobile for my photo galleries. Is there a way to code this? My website is scotteubank.com and the password to enter is yes1. The first screenshot I have attached is how the desktop looks now. The second screenshot shows how I want the mobile view to look. Right now it is still 2 columns on the mobile view. Thanks!

 

Add to Design > Custom CSS

/* Mobile-Homepage-1 column */
@media screen and (max-width:767px) {
body.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Thanks!! How do I do this to all three of my galleries? Being adventure, earth and lifestyle. I would like to add a home page as well so that messes up the original code.

17 hours ago, scooter713 said:

Thanks!! How do I do this to all three of my galleries? Being adventure, earth and lifestyle. I would like to add a home page as well so that messes up the original code.

Use this

/* Mobile-1 column */
@media screen and (max-width:767px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}