Jump to content

Custom Code to change video gallery view on mobile

Recommended Posts

Site URL: https://www.portseafilms.com.au/wedding-films

Hello everyone,

 

I have my website to show my wedding films. My website is www.portseafilms.com.au

I have made a video gallery with vimeo urls. It looks good on desktop, but the thumbnails are to small on mobile view.

I've done some research and it seems I cant change gallery view on mobile without it effecting the desktop view. So i am looking for a custom code to make thumbnails larger and stacked in mobile view.

If anyone could help with that, it would be amazing.

Thanks!

desktop view.png

desktop view 2.png

Mobile view.png

mobile view 2.png

Edited by portseafilms
Link to comment
  • Replies 4
  • Views 607
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Try adding this to Custom CSS, and then adjust the mobile layout if it's not right:

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

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 9/23/2024 at 6:46 PM, portseafilms said:

Hi, thanks for the message. But it doesnt seem like it worked.

I can change the design, so that the grid has only 1 thumbnail on mobile, but it still changes the desktop view. Please see images attached.

 

Maybe i'm doing it wrong somehow?

1 thumbnail per row mobile.png

1 thumbnail per row pc.png

1 thumbnail per row with code.png

I see you solved? It already show 1/row on mobile and 3/row on desktop now

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, tuanphan said:

I see you solved? It already show 1/row on mobile and 3/row on desktop now

No, it didn't work. In the example attached, when it's 1 image per row on mobile its 1 image per row on desktop as well.

Edited by portseafilms
Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.