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

Question

Site URL: https://aynaalondon.com

Hi - my website is nearly finished apart from one thing. I have a gallery on this page: https://www.aynaalondon.com/our-story.

This gallery is fine when viewed on the desktop:
766290468_Screenshot2020-06-27at15_08_03.thumb.png.7247dabc412dd2d4f46bd2da6d269323.png

However, when viewed on mobile, the pictures are not on one row anymore:

587231441_Screenshot2020-06-27at15_07_47.png.8819876352f60b88f987ee8a1a16b38d.png

 

Is there any CSS code I can add in order to resize the gallery to ensure that the pictures are always on one row regardless of device?

 

Thanks,
AYNAA

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0
.gallery-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
}

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0
1 hour ago, rwp said:

.gallery-grid-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
}

 

Perfect! This worked - thank you so much! 🙂 

Share this post


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...