Jump to content

Change Gallery on Mobile Version for 1 Column (7.1)

Recommended Posts

Posted

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!)

  • 1 month later...
Posted

Hello @tuanphan
I had the same issue and it was partly solved following your answer. Thank you. However I would like to ask you how I can make the space between the images on the mobile view like the same gap of my shop images. Please have a look at my website. It would be great you could help me on this issue. Thank you in advance. 

https://www.kunsik.com

Mobile view
- Works

(There are no gaps between the images, I would like to fix it. Also there are no margins on the left and right side of the photos. which I would like to give the gap and margins as the Shop category photos)

IMG_5808.thumb.jpg.83ca086d29cd4f2939fb82e266472c05.jpg

- Shop

(The below attached images in the Shop category are the ideal photo display, what I would like to fix the Work category as this format)

IMG_5809.thumb.jpg.8adc6e7e2ccacb647970c0e87402a501.jpg

Posted

@tuanphan Hi I'm attaching the links

Please have a look at them in Mobile view. 
There is no problem with desktop view. 

Mobile view
- Works category-product page
(There are no gaps between the images, I would like to fix it. Also there are no margins on the left and right side of the photos. which I would like to give the gap and margins as the Shop category photos)
https://www.kunsik.com/works/railshelf


Mobile view
- Shop category-product page
(The below attached images in the Shop category are the ideal photo display, what I would like to fix the Work category as this format)
https://www.kunsik.com/shop/p/shelfno-redoak


Thanks in advance. 

Posted

Q1. Add to Design > Custom CSS

/* Masonry mobile */
@media screen and (max-width:767px) {
figure.gallery-masonry-item {
    margin-bottom: 10px;
}
.gallery-masonry {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
}

Q2. Did you solve it?

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!)

  • 6 months later...
Posted

How can I make this change for only ONE page and not all pages on my site?

I used this code from above and it worked well:

@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;
}
}
Posted (edited)

Hi KathieB,

If you go to Advanced on your specific page, then paste the code with <style> at the beginning and </style> at the end then it should work.

Edited by GLP_Films
type
Posted
On 10/15/2021 at 5:40 AM, KathieB said:

How can I make this change for only ONE page and not all pages on my site?

I used this code from above and it worked well:

@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;
}
}

Follow @GLP_Films comment, or If you use Personal Plan >> Edit Page >> Add a Code Block under gallery >> Paste this code

<style>
  @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;
}
}
</style>

 

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!)

  • 2 months later...
Posted
On 1/10/2022 at 10:33 PM, buenorodrigo said:

@tuanphan yes. 

I wanna keep the lightbox when clicking on images to open images larger on desktop version (it't already like that). But I would like to disable clicking os images on mobile version. 

Add to Design > Custom CSS

/* Disable homepage gallery lightbox */
@media screen and (max-width:767px) {
body.homepage .gallery-masonry figure {
    pointer-events: none;
}
}

 

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!)

  • 3 months later...
Posted

I have same issue

 I want to have 3 columns (gallery page) on desktop and just 1 column (gallery page) on mobile version? In wells template 

Please help 🙂

Posted
On 4/14/2022 at 10:58 PM, dorotapo said:

I have same issue

 I want to have 3 columns (gallery page) on desktop and just 1 column (gallery page) on mobile version? In wells template 

Please help 🙂

I gave code on one of your post, you try reading all notifications

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!)

Posted
23 hours ago, dorotapo said:

@tuanphan Sorry but I didn't find that 😞 

Add to Design > Custom CSS

@media screen and (min-width:641px) {
div#page-62572520657d2206b026d3ff .span-4 {
    width: 33.3333% !important;
    float: left !important;
}
}
@media screen and (max-width:640px) {
div#page-62572520657d2206b026d3ff .span-4 {
    width: 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!)

Posted
On 4/27/2022 at 10:41 PM, dorotapo said:

@tuanphan

 https://dorotaporebska.com/new-gallery  here in gallery page I want to have 3 columns on every desktop and only one on mobile.

I don't want responsive sizing while opening gallery page on different screen.

I don't know is is possible to happen, on regular page i have as much columns as i want but i need gallery page.

I would love to have it like here:  https://beleiu.net  on every desktop and on mobile

It looks like I checked wrong site.

Saw 2 similar questions & thought that question is your.

Try adding to Design > Custom CSS

@media screen and (min-width:641px) {
div#flowItems {
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    grid-gap: 20px !important;
}
div#flowItems>article {
    margin: 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!)

  • 1 month later...
Posted
On 6/28/2022 at 8:20 AM, emma_HCBA said:

Hi @tuanphan - how could I do this with the Grid-Simple option?  So three options show on desktop but have the same three on mobile view but as a carousel?

Can you share link to page where you use grid simple? We can check 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!)

  • 6 months later...
Posted (edited)

@tuanphan Just wanted to say a very big thank you for the code here. I've had a couple of issues that I've wanted to resolve with one of my websites and both times I've found the solution here on the forum and both solved by you! Much appreciated. 

Edited by eddy_pearce
Format...bold...!

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.