[Mobile] Gallery grid as a single column

Site URL: https://augustussung.com

hello all,

I'm using the Forte template. How do I make my gallery grid appear as a single column instead of two on mobile?

Appreciate all the help. Thanks!

What's your site password?

1 hour ago, ChromaticZero said:

What's your site password?

gussungforte

Add to Home > design > Custom CSS

@media screen and (max-width:768px) {
.sqs-gallery-design-grid-slide {
    width: 100% !important;
}
}

11 hours ago, tuanphan said:

Add to Home > design > Custom CSS

@media screen and (max-width:768px) {
.sqs-gallery-design-grid-slide {
    width: 100% !important;
}
}

 

thanks for the above @tuanphan! I have a couple more questions - 

1. How do I ensure the dimensions are the same for every thumbnail? As you can see, the height of the 2nd thumbnail is shorter than the 1st.


2. The hover effect doesn't seem to be responsive. It appears intermittently. I'm not sure if there's any way to fix it?

3. And when the hover effect does appear, my text is not centralized.

appreciate your help!!!!

On 5/11/2020 at 9:51 AM, tuanphan said:

Add to Home > design > Custom CSS

@media screen and (max-width:768px) {
.sqs-gallery-design-grid-slide {
    width: 100% !important;
}
}

 

I came here wirth the same problem – I have an image gallery (with three images across) that goes to two across in mobile view, which doesn't look good. I just want it to be a single coloumn of images in mobile view. I tried the above CSS but nothing changed? Image attached.

On 6/24/2020 at 1:25 AM, matthewhodges said:

I came here wirth the same problem – I have an image gallery (with three images across) that goes to two across in mobile view, which doesn't look good. I just want it to be a single coloumn of images in mobile view. I tried the above CSS but nothing changed? Image attached.

Can you share link? We can check easier.

@tuanphan I tried the code snippet above to force a 1-column version of the images in my grid view, but it didn't seem to change anything. Any other CSS that needs to be added for it to work?

The site I'm trying to update is: kjnparker.com, password: quiteexploded

Thanks!

9 hours ago, kjnparker said:

@tuanphan I tried the code snippet above to force a 1-column version of the images in my grid view, but it didn't seem to change anything. Any other CSS that needs to be added for it to work?

The site I'm trying to update is: kjnparker.com, password: quiteexploded

Thanks!

Add to Home . Design > cusotm CSS

@media screen and (max-width:767px) {
.homepage {
figure.gallery-strips-item {
    width: 100% !important;
    transform: unset !important;
    position: static !important;
}
figure.gallery-strips-item img {
    height: auto !important;
}
.gallery-strips-wrapper.gallery-strips-list--ready {
    height: auto !important;
}
}
}

On 6/25/2020 at 10:48 AM, tuanphan said:

Can you share link? We can check easier.

Hi – this is the site: https://www.matthodgesdesign.com/

I would like for the image gallery on the homepage to collapse to a single column in mobile view. There are other galleries on the site that I want this to happen for too, and some that I don't – so is there code I can target to specific pages?

Thanks!

1 hour ago, tuanphan said:

Add to Home . Design > cusotm CSS

@media screen and (max-width:767px) {
.homepage {
figure.gallery-strips-item {
    width: 100% !important;
    transform: unset !important;
    position: static !important;
}
figure.gallery-strips-item img {
    height: auto !important;
}
.gallery-strips-wrapper.gallery-strips-list--ready {
    height: auto !important;
}
}
}

 

Worked like a charm. Thanks!