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 

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.