buenorodrigo Posted February 4, 2021 Share Posted February 4, 2021 Site URL: https://www.buenorodrigo.com Hello! Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! my page https://www.buenorodrigo.com dorotapo 1 Link to comment
tuanphan Posted February 5, 2021 Share Posted February 5, 2021 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; } } erikaa, dorotapo and CKS 2 1 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
CKS Posted April 3, 2021 Share Posted April 3, 2021 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) - 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) Link to comment
tuanphan Posted April 5, 2021 Share Posted April 5, 2021 Hi. Q1. Q2. I don't see these images. Can you share link to exact page? 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
CKS Posted April 5, 2021 Share Posted April 5, 2021 @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
tuanphan Posted April 7, 2021 Share Posted April 7, 2021 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? erikaa 1 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
KathieB Posted October 14, 2021 Share Posted October 14, 2021 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
GLP_Films Posted October 15, 2021 Share Posted October 15, 2021 (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 October 15, 2021 by GLP_Films type Link to comment
tuanphan Posted October 18, 2021 Share Posted October 18, 2021 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
buenorodrigo Posted January 9, 2022 Author Share Posted January 9, 2022 @tuanphan need your help again. How can I disable lightbox only on mobile version? Thanks. Link to comment
tuanphan Posted January 10, 2022 Share Posted January 10, 2022 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
buenorodrigo Posted January 10, 2022 Author Share Posted January 10, 2022 @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. Link to comment
tuanphan Posted January 12, 2022 Share Posted January 12, 2022 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; } } buenorodrigo 1 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
dorotapo Posted April 14, 2022 Share Posted April 14, 2022 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 🙂 Link to comment
tuanphan Posted April 18, 2022 Share Posted April 18, 2022 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
dorotapo Posted April 23, 2022 Share Posted April 23, 2022 @tuanphan Sorry but I didn't find that 😞 Link to comment
tuanphan Posted April 24, 2022 Share Posted April 24, 2022 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
dorotapo Posted April 25, 2022 Share Posted April 25, 2022 @tuanphan Thai you, but it doesn't work 😞 Link to comment
tuanphan Posted April 27, 2022 Share Posted April 27, 2022 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
tuanphan Posted April 30, 2022 Share Posted April 30, 2022 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
emma_HCBA Posted June 28, 2022 Share Posted June 28, 2022 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? Link to comment
tuanphan Posted June 30, 2022 Share Posted June 30, 2022 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
eddy_pearce Posted January 9 Share Posted January 9 (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 January 9 by eddy_pearce Format...bold...! Link to comment
W75 Posted January 13 Share Posted January 13 Hi! Can I have 2 columns on desktop and just 1 column on mobile version? my page: https://www.wojtekurbanek.com/ Thanks so much for the help Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment