Jump to content

Change number of columns on image gallery on mobile only

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution
14 hours ago, AmyPeacock said:

Site URL: https://www.amypeacock.com/

I have my gallery of images set at 2 columns, which I like on desktop, but I'd like it so it's only one column on mobile. How can I achieve this?

Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !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
6 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

Thank you so much!! That works great

Link to comment
  • 1 year later...
On 11/19/2022 at 8:05 AM, bamab said:

and what, when i need offset (spacing) between each tile?? where can I define that?

To add space between items, edit this line

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}

to

figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
	margin-bottom: 20px;
}

 

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
  • 6 months later...
On 6/9/2021 at 7:50 PM, tuanphan said:

Add to Design > Custom CSS

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

 

is it possible to specify one, or multiple, pages to apply this code to? That way it doesn't affect every page

Link to comment
On 6/21/2023 at 3:03 AM, gantons said:

is it possible to specify one, or multiple, pages to apply this code to? That way it doesn't affect every page

This code will affect all Masonry Galleries

If you need to affect it on specific gallery, just share link to page where you use it, we can adjust the code easier

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 6/22/2023 at 1:41 AM, tuanphan said:

This code will affect all Masonry Galleries

If you need to affect it on specific gallery, just share link to page where you use it, we can adjust the code easier

https://www.koblecreative.com/koble-creates/hwp

if it asks for a password try "password"

 

i added a template gallery in there for editing purposes, you can ignore the actual content below that - if i'd prefer to use a gallery section.

 

Thank you

Link to comment

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
[data-section-id="6499dcdea703c320fec3e58c"] .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Because you are using Gallery Grid on this page so the code will be shorter.

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
21 hours ago, tuanphan said:

Use this code

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
[data-section-id="6499dcdea703c320fec3e58c"] .gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}
}

Because you are using Gallery Grid on this page so the code will be shorter.

excellent. thank you

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.