Jump to content
Go to solution Solved by sorca_marian,

Recommended Posts

Hi,

I am looking for a way to hide any grid-gallery items more than 4 on mobile version of my website. 
image.thumb.png.893bbe3a945ab0b82424db4d4c4bbda8.pngOn desktop version, it looks good like this, 5 faces next to each other. But on mobile version I want to limit the grid-gallery to 4 faces, and then have the 5th one dissappear, so there is never a second row. I've already maxed the amount of photos to 4 in a row, but can't seem to make the second row dissappear. If I hide the specific image code, the code keeps changing and it pops back up after.


Thanks to anyone who can help. 

Link to comment
  • Replies 9
  • Views 268
  • Created
  • Last Reply

Top Posters In This Topic

Can you send a link to the site?

👨‍🔧👨‍💻 Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment
  • Solution

For the section that you have in the image, you can add the below code in the Page Header Code Injection of the homepage
 

<style>
@media (max-width : 767px) {
    #sections > :nth-child(4) .sqs-gallery-design-grid > :last-child {
        display : none;
    }
}
</style>

 

Screenshot 2024-06-30 at 20.30.06.png

👨‍🔧👨‍💻 Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment

Another question, because I'm making a mess. 

Do you know how to get 19 items on 1 row on the desktop version, same size as the rest of those gallery grids on the website, and then only have the 4 items on the mobile version? 

Link to comment

I think you can just add until you reach 19 on desktop and on for mobile add CSS to hide the 15

👨‍🔧👨‍💻 Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

Link to comment
14 hours ago, sorca_marian said:

I think you can just add until you reach 19 on desktop and on for mobile add CSS to hide the 15

In the Squarespace grid gallery settings you can't choose more than 10 thumbnails per row. Would you happen to know how to turn that into 19?image.thumb.png.04d128eb5126f67e167542b964de3a44.png

And I can't figure out how I managed to hide anything over 4 items before on mobile version? Do you happen to know a code for that by any chance?

Link to comment

You can create a new grid next to it 🙂

👨‍🔧👨‍💻 Contact me for development and design work - Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

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.