Change Column number in Mobile View to 1

Can you share page url? We can check easier

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>

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 omg thanks 🙏

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

Thanks,
K

@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

@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".