lisanb Posted June 12, 2022 Share Posted June 12, 2022 (edited) Site URL: https://www.nbdesignstudio.com/ Hello, I am using 2 different gallery types on my website (Grid Strips & Strips) and individual image blocks. I would like to be able to resize the Grid Strips, Strips, and Individual image blocks for mobile version if possible and I would like the images for all to also appear 2 side by side for less scrolling . I been hunting around for a code to revise with my information and use but its not working out for me. If someone can help me with a solution that would be very much appreciated ! Also this side of my site is not public yet. I have added a password Duchess2001 I have tagged the duplicated portfolios w/ "Need Assistance" with the issues I am having Edited June 13, 2022 by lisanb Link to comment
Solution tuanphan Posted June 13, 2022 Solution Share Posted June 13, 2022 Hi, Which page are you referring to? I don't see them on homepage 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
lisanb Posted June 13, 2022 Author Share Posted June 13, 2022 (edited) It’s under the “Portfolio” page the password is : Duchess2001 https://www.nbdesignstudio.com/. (under portfolio tab if link at bottom does not work ) https://www.nbdesignstudio.com/portfolio-3 password for portfolio page : Duchess2001 The portfolios w/ Lott Residence "Need Assistance" is the pages with the issues I am having Edited June 13, 2022 by lisanb Link to comment
lisanb Posted June 13, 2022 Author Share Posted June 13, 2022 Projects ——> Lott Residence Needs Assistance & Lott Residence 1 Needs assistance Link to comment
tuanphan Posted June 14, 2022 Share Posted June 14, 2022 With this page https://www.nbdesignstudio.com/portfolio-3/lott-ztgty-x76kc-xph3c Try adding this to Design > Custom CSS /* Mobile Residence 1 */ @media screen and (max-width:767px) { div#page-section-62a0ff9b5e3e99690650f1e8 .span-8, div#page-section-62a17578e62f9f5f5e9b3813 .span-8 { width: 66.6667% !important; float: left !important; } div#page-section-62a0ff9b5e3e99690650f1e8 .span-4, div#page-section-62a17578e62f9f5f5e9b3813 .span-4 { width: 33.33333% !important; float: left !important; } .gallery-strips-wrapper.gallery-strips-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px 10px; } figure.gallery-strips-item { position: relative !important; transform: unset !important; width: 100% !important; } .gallery-strips-item-wrapper { height: auto !important; } .gallery-strips-item img { height: auto !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
lisanb Posted June 14, 2022 Author Share Posted June 14, 2022 (edited) Hi ! I actually inserted the code and unfortunately it did not work this is what happened.. the individual block images were moved beside each other and there is also huge gaps between and above them. I actually needed only the Gallery Strips and Strips block to show up beside each other, that is what I needed help with. Edited June 14, 2022 by lisanb Link to comment
lisanb Posted June 14, 2022 Author Share Posted June 14, 2022 I attached an example of the Strip gallery stacked .. but I would like the images to be shown 2 rows images side by side. I attached images showing how I would like it to look on the mobile side only. This would be for this page :https://www.nbdesignstudio.com/portfolio-3/lott-ztgty-x76kc-xph3c the same page you listed Hopefully this can be resolved ... thank you so much for your help as well ! Link to comment
tuanphan Posted June 15, 2022 Share Posted June 15, 2022 Try this new code /* Mobile Residence 1 */ @media screen and (max-width:767px) { .gallery-strips-wrapper.gallery-strips-list--ready { height: auto !important; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px 10px; } figure.gallery-strips-item { position: relative !important; transform: unset !important; width: 100% !important; } .gallery-strips-item-wrapper { height: auto !important; } .gallery-strips-item img { height: auto !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
lisanb Posted June 15, 2022 Author Share Posted June 15, 2022 I Inserted the mobile code and it worked the only odd thing is i'm experiencing is an un equal gap between 2 of the stacked images. Not sure if it's a glitch (i reloaded nothing changed) or a sizing issue length wise with the inserted image above. If there is a fix please let me know, however in the meantime I will also consult with the photographer regarding the file size he sent me. Thank You so much you have been such a great 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