M-Ri84 Posted January 20 Share Posted January 20 Hello! How can I have 2 columns on mobile view instead of just 1 column? Appreciate your help! my site, https://www.manuelrickenbacher.com Link to comment
M-Ri84 Posted January 20 Author Share Posted January 20 it should look afterwords more or less like this... Link to comment
Ziggy Posted January 20 Share Posted January 20 Try this thread: tuanphan 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
M-Ri84 Posted January 23 Author Share Posted January 23 It doesn't work. any other ideas? appreciate Link to comment
M-Ri84 Posted January 26 Author Share Posted January 26 On 1/20/2023 at 3:20 PM, Ziggy said: Try this thread: unfortunately it doesn't work out with my template. I found an other code in the forum (see below) - which works, but the gap between the images are way too far. has anybody an idea how to solve this ... ? really appreciate code: @media(max-width:767px) { .gallery-strips-item { width: 100% !important; position: unset !important; transform: unset !important; } .gallery-strips-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; height: unset !important; } .gallery-strips-item img { object-fit: contain !important; height: 100% !important; } } Link to comment
tuanphan Posted January 28 Share Posted January 28 Add this code to Design > Custom CSS /* Gallery strips 2 columns mobile */ @media (max-width: 576px) { .gallery-strips .gallery-strips-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0 5px; } .gallery-strips-item-wrapper { height: auto!important; } .gallery-strips-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; } .gallery-strips .gallery-strips-item img { height: 100%!important; 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
M-Ri84 Posted February 2 Author Share Posted February 2 On 1/28/2023 at 8:53 AM, tuanphan said: Add this code to Design > Custom CSS /* Gallery strips 2 columns mobile */ @media (max-width: 576px) { .gallery-strips .gallery-strips-wrapper { columns: 2; column-gap: 0; height: auto!important; display: block!important; padding: 0 5px; } .gallery-strips-item-wrapper { height: auto!important; } .gallery-strips-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 5px!important; box-sizing: border-box; } .gallery-strips .gallery-strips-item img { height: 100%!important; width: 100%!important; } } Hi Tuanphan Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load. And one site doesn't load at all (places). If you have any suggestions, pleas let me know. Thanks! Link to comment
tuanphan Posted February 8 Share Posted February 8 On 2/2/2023 at 10:42 PM, M-Ri84 said: Hi Tuanphan Thank you very much, it looks apparently perfect, but it slows down the whole page, that is not useable. It also loads first all images and put it on the left column, and then fills the right side up. It should display first picture left, second right, then third left again under the first one, and right again, and so on. May be that's why the page needs so much time to load. And one site doesn't load at all (places). If you have any suggestions, pleas let me know. Thanks! If this code doesn't work, I don't know any other ways 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
M-Ri84 Posted February 10 Author Share Posted February 10 On 2/8/2023 at 3:32 AM, tuanphan said: If this code doesn't work, I don't know any other ways Hi Tuanphan Thanks a lot for your reply. May be there is an other way to solve my problem. Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that? Thanks for your effort. Link to comment
tuanphan Posted February 11 Share Posted February 11 23 hours ago, M-Ri84 said: Hi Tuanphan Thanks a lot for your reply. May be there is an other way to solve my problem. Do you know a CSS injection for disabling mobile view at all? I mean, can I put the mobile breakpoint to 0px or something like that? Thanks for your effort. Hi, no way. Each page/each section will need a different code 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
M-Ri84 Posted February 22 Author Share Posted February 22 On 2/11/2023 at 1:08 PM, tuanphan said: Hi, no way. Each page/each section will need a different code okay, but thank you anyway ! 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