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

Change Gallery on Mobile Version for 1 Column (7.1)


buenorodrigo

Question

22 answers to this question

Recommended Posts

  • 0

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0

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

Link to comment
  • 0

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;
}
}
Link to comment
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
17 hours ago, buenorodrigo said:

@tuanphan need your help again.

How can I disable lightbox only on mobile version? 

Thanks.

You mean homepage lightbox, when clicking on images?

https://www.buenorodrigo.com/

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 4/25/2022 at 9:49 PM, dorotapo said:

@tuanphan

Thai you, but it doesn't work 😞 

Can you add & keep the code? We can check it again easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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