Change Column number in Mobile View to 1

Hello everyone,

I hope everyone is taking care of their health during these challenging times. 

Can anyone please help us with changing the setting of our website on Mobile view?

At the moment, below is my gallery screenshot on mobile: We have 2 columns and the aspect ratio is set to square. 

If possible we want the column changed 1 column and the aspect ratio to be set to Lanscape/on its original size, with spacing in between the images.

The reason why we are doing this is we want to cheat the zoom on pinch feature at least on overview (never mind on Lightbox) - we have lightbox btw.

Thank you and stay safe,
K

Can you share page url? We can check easier

@tuanphan omg thanks 🙏

https://www.ptphotography.com/mauritius-four-seasons-mauritius

Thanks,
K

On 1/7/2021 at 3:11 PM, Ptphotography said:

@tuanphan omg thanks 🙏

https://www.ptphotography.com/mauritius-four-seasons-mauritius

Thanks,
K

Add to Page Header

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

@tuanphan the code worked. Bless you!

Additional favour please, at the moment we have successfully changed the column number to 1 but on preview, the image aspect ratio is yet to be set to square (before). Please, how do we change the aspect ratio to Lanscape/on its original size so it looks like this (after)

Thank you for all your help.

Stay safe,
K

p.s the reason why I am doing this is so I can pinch-to-zoom and view the images in full size on mobile while keeping my beautiful grid gallery on desktop mode. This is the cheat I have thought about since Lightbox does not allow us to zoom the images on phone.

Just tried, but it doesn't worked for me. Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! 

my page https://www.buenorodrigo.com

@tuanphan hope you can help me. 

Just tried, but it doesn't worked for me. Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! 

my page https://www.buenorodrigo.com

On 2/3/2021 at 6:59 AM, buenorodrigo said:

 

 

@tuanphan hope you can help me. 

Just tried, but it doesn't worked for me. Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! 

 

my page https://www.buenorodrigo.com

Add to Design > Custom CSS

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

@tuanphan Thank you so much! 

On 1/8/2021 at 8:56 AM, tuanphan said:

Add to Page Header

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

 

Hi  @tuanphan

I'm trying to get  something similar to this to work on a collection of client logos displayed in a grid gallery.

https://pike-okra-yjcm.squarespace.com/

PW: logofix

I'm actually looking to make the mobile columns higher than the default of 2. I'd want to try different numbers but perhaps 5 would be good.

Thanks in advance.

On 2/17/2021 at 7:10 PM, martindrake81 said:

Hi  @tuanphan

I'm trying to get  something similar to this to work on a collection of client logos displayed in a grid gallery.

https://pike-okra-yjcm.squarespace.com/

PW: logofix

I'm actually looking to make the mobile columns higher than the default of 2. I'd want to try different numbers but perhaps 5 would be good.

Thanks in advance.

Add to Design > Custom CSS the nsave & reload your site

/* Clients */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613562011172_35147 .slide {
    width: 20% !important;
}
}

@tuanphan Thank you so much for this. Very grateful 🙂 🙂

On 2/22/2021 at 7:15 PM, martindrake81 said:

@tuanphan Thank you so much for this. Very grateful 🙂 🙂

Hi, I see about page, news page you haven't changed SEO Title, so browser tab name still shows "About 2", "Blog 2".

On 2/28/2021 at 1:17 AM, tuanphan said:

Hi, I see about page, news page you haven't changed SEO Title, so browser tab name still shows "About 2", "Blog 2".

@tuanphan Thank you! It's all very much still work in progress and I'll be sure to check all the SEO namings. 🙂