jbbbbbbbbb Posted April 10, 2022 Share Posted April 10, 2022 Hello, Under the section 'Fine Art' of my website I have a series of photos that are set up in columns of 3 for desktop. Currently in mobile view the columns are set up for 2 columns. Is there some css code that would be able to show the photos in only one column for mobile only? I also would like to keep the spacing between images the same or similar. Thank you! URL: jordanbellvisuals.squarespace.com Ps: water1234 Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 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
jbbbbbbbbb Posted April 11, 2022 Author Share Posted April 11, 2022 Thank you Tuanphan. Is there a way to get even height spacing between the images? I tried changing the "gallery-masonry-item-wrapper" height from 'auto' to around '550px' but the spacing is uneven because the images have different heights. If not all good. Thank you anyway!!!! Link to comment
Solution tuanphan Posted April 15, 2022 Solution Share Posted April 15, 2022 On 4/11/2022 at 8:09 AM, jbbbbbbbbb said: Thank you Tuanphan. Is there a way to get even height spacing between the images? I tried changing the "gallery-masonry-item-wrapper" height from 'auto' to around '550px' but the spacing is uneven because the images have different heights. If not all good. Thank you anyway!!!! add margin into this code figure.gallery-masonry-item { position: relative !important; width: 100% !important; transform: unset !important; margin-bottom: 30px; } 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
jbbbbbbbbb Posted April 18, 2022 Author Share Posted April 18, 2022 Thank you tuanphan 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