Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

[Mobile] Gallery grid as a single column


Gus1987

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 1
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;
}
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
Posted (edited)
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.
IMG_2299.thumb.PNG.20509b073dcc3e75a34a4890949a864a.PNG

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.

IMG_2300.thumb.PNG.892048fb975b689c1d0e589f75abf216.PNG

appreciate your help!!!!

Edited by Gus1987
Link to post
  • 0
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.

Screenshot 2020-06-23 at 19.24.34.png

Link to post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

@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!

Link to post
  • 0
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!

Link to post
  • 0
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!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...