Jump to content

Different Gallery types for Desktop and Mobile

By fstone, in Customize with code

Go to solution Solved by Marya,

Recommended Posts

  • Replies 3
  • Views 521
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

fstone
fstone

Site URL: http://redfinn.co.uk Hey, I know this isn't the first post of its kind but I'm trying to have the 'Slideshow: Simple' gallery for desktop and 'Grid: Masonry' for the mobile view.  If

Marya
Marya

@fstone The easiest way to achieve this is set up both galleries and then use CSS to hide one gallery depending on the screen size. If you set them up, I can take a look at your site and send the

Marya
Marya

@fstone Here's a sample of code you can use to add for the other bodies of work on your site. This is for Personal > Friends specifically. @media screen and (max-width: 640px) { section[data

Marya Level 5

Marya

Posted
Posted

@fstone

The easiest way to achieve this is set up both galleries and then use CSS to hide one gallery depending on the screen size. If you set them up, I can take a look at your site and send the code over! Just make sure to share your site pw 🙂

  • Solution
Marya Level 5

Marya

Posted
  • Solution
Posted

@fstone Here's a sample of code you can use to add for the other bodies of work on your site. This is for Personal > Friends specifically. 

@media screen and (max-width: 640px) {
    section[data-section-id="66ce3733f867976ea58abdcc"] {
        display: none!important;
    }//desktop gallery
}//hide on mobile
@media screen and (min-width: 641px) {
    section[data-section-id="6702ea6a582bf305b6f183a3"] {
        display: none!important
    }//mobile gallery
}//hide on desktop

 

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources