Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change Column number in Mobile View to 1


Ptphotography

Question

 

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.

 

Untitled-2.thumb.jpg.3968deb6c9aaf0f8f0706369b15cd603.jpg

 

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

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 { positio

Can you share page url? We can check easier

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: 1

Posted Images

12 answers to this question

Recommended Posts

  • 1
On 1/7/2021 at 3:11 PM, Ptphotography 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>

 

Link to post
  • 1
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;
}
}

 

Link to post
  • 0

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

1.thumb.jpg.19545950acd34907fc0f404df42f6113.jpg

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.

 

Link to post
  • 0
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.

Screenshot 2021-02-17 at 12.02.25.png

Link to post
  • 0
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.

Screenshot 2021-02-17 at 12.02.25.png

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

 

Link to post
  • 0
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".

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...