Jump to content

Code to make gallery single column in mobile view

Go to solution Solved by tuanphan,

Recommended Posts

I am using the following bit of code on pages of my site which contain a gallery, so that in mobile view the gallery goes to a single column (rather than two coloumns, which seems to be the default):

<style> @media screen and (max-width:800px) {.gallery-grid-wrapper {grid-template-columns: repeat(1,1fr) !important; grid-row-gap: 1vw !important;}} </style>

The code works well on every page except the homepage. I think this is because on the homepage I am using the 'masonry' gallery, as opposed to the 'simple grid' that I am using on all the other pages. I have tried adjusting the code above but I can't get it to work. Any ideas?

Link to comment

Can you share the website URL and the page and section you want this to apply to? Thanks!

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution
On 1/14/2023 at 12:07 AM, matthewhodges said:

Hi

https://www.matthodgesdesign.com/

It's the homepage – the gallery is the whole page, basically.

Thanks

Use this code for masonry

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

 

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
On 1/15/2023 at 9:44 AM, tuanphan said:

Use this code for masonry

/* Masonry to grid mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
    display: grid;
    grid-template-columns: repeat(1,1fr) !important;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: 100% !important;
}
}

 

One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that?

Link to comment
On 1/17/2023 at 9:33 PM, matthewhodges said:

One other thing – my social logos in the footer are right-aligned, but when it switches to mobile view I would prefer them to be centred. Is there any code to fix that?

It looks already centered 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
  • 1 year later...
On 2/13/2024 at 5:09 AM, Arcanjo1 said:

Thanks for the code, how do I get the images to fill the screen width wise? Currently they are left aligned and small, some other formats fill the screen. See attached screenshot...

Screenshot 2024-02-12 at 22.08.17.png

Can you share link to this page?

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
  • 4 weeks later...

@tuanphan - Thanks for this code for a stacked 1-column mobile view for Masonry galleries, which works great! However, I, too, am looking to make the images go full width on mobile. The spacing is otherwise very awkward-looking and uneven, as masonry grids allow for images of varying dimension ratio's--portrait, landscape, square, etc. Making them all full-width would make these uniform, just with varying heights. Please see https://sdibeta.squarespace.com/gallery (pwd: anyone) on mobile:

Screenshot2024-03-12104828.thumb.png.c26e1b33bf328c2077d39f009a3b9c8b.png

I'm unsure how to target width here, since inspecting the CSS, the mobile masonry item (.gallery-masonry-item)  is already set to a width of 100% in your code, but this is being overridden somehow.

Link to comment

Add these lines of code before the final bracket:

.gallery-masonry-item img {
    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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.