RACSEB Posted February 9, 2022 Share Posted February 9, 2022 Hi @tuanphan, I have a similar issue, can you help please? I want the images to display as a gird, ideally 4 columns, like in desktop view. https://keyboard-cyan-29l8.squarespace.com/press-1 Currently the mobile view condenses it to one icon per row, and the 'press' text box is in the wrong place. Thank you so much! Link to comment
SittinginFlorida Posted February 9, 2022 Share Posted February 9, 2022 On 2/4/2021 at 5:55 AM, tuanphan said: Add to Design > Custom CSS /* Mobile gallery */ @media screen and (max-width:767px) { .gallery-grid-wrapper { grid-template-columns: repeat(3,1fr) !important; } } I've been working hard on a 3 column mobile display with image blocks. It isn't a gallery and this is the best code I've been able to use, but there are holes in the mobile display . Any ideas? @media screen and (max-width:767px) { div#page-5abcddcb88251b734ff78ed1 .image-block { width: 33%; float: left !important; clear: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } } Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/9/2022 at 11:31 PM, SittinginFlorida said: I've been working hard on a 3 column mobile display with image blocks. It isn't a gallery and this is the best code I've been able to use, but there are holes in the mobile display . Any ideas? @media screen and (max-width:767px) { div#page-5abcddcb88251b734ff78ed1 .image-block { width: 33%; float: left !important; clear: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 5px !important; padding-bottom: 5px !important; } } Can you share link to page in screenshot? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LeauxFi Posted February 14, 2022 Share Posted February 14, 2022 Hello! I'm trying to add custom social icons at the bottom of my team members pages. I really tried to go through all the responses here and figure it out, but its just not working. I put 4 individual images next to each other sandwiched between two spacers for sizing. I've tried every combination I could think of with the provided CSS (thank you tuanphan) and all of the data-section-id's and block-yui's from that section. Nothing was working. Can someone please help me get them to display side by side on mobile? Any help would be greatly appreciated. ALSO, slightly different. I've had to use custom CSS on every one of the small sections like the one here in red that I'm talking about because once you shrink the section size to the minimum (10) and save... everything in it is no longer centered. Does anyone know how to stop that WITHOUT using code? Am I doing something wrong there? https://www.thetenmg.com/leauxfi Link to comment
sa51 Posted February 15, 2022 Share Posted February 15, 2022 Hi @tuanphan, I have tried implementing the above codes to suit my website, but with no luck! Could you please help me to do the same for this logo wall on mobile - I want 2-3 logos per row in mobile? www.kindenterprises.co Thanks heaps! Sophie Link to comment
tuanphan Posted February 19, 2022 Share Posted February 19, 2022 On 2/14/2022 at 4:13 PM, LeauxFi said: Hello! I'm trying to add custom social icons at the bottom of my team members pages. I really tried to go through all the responses here and figure it out, but its just not working. I put 4 individual images next to each other sandwiched between two spacers for sizing. I've tried every combination I could think of with the provided CSS (thank you tuanphan) and all of the data-section-id's and block-yui's from that section. Nothing was working. Can someone please help me get them to display side by side on mobile? Any help would be greatly appreciated. ALSO, slightly different. I've had to use custom CSS on every one of the small sections like the one here in red that I'm talking about because once you shrink the section size to the minimum (10) and save... everything in it is no longer centered. Does anyone know how to stop that WITHOUT using code? Am I doing something wrong there? https://www.thetenmg.com/leauxfi Add to Design > Custom CSS /* Leauxfi mobile 4 icons */ @media screen and (max-width:767px) { div#page-section-620a01bb12e07a50b7e99b18>.row:nth-child(2)>.col { width: 25% !important; float: left !important; } } On 2/15/2022 at 8:50 AM, sa51 said: Hi @tuanphan, I have tried implementing the above codes to suit my website, but with no luck! Could you please help me to do the same for this logo wall on mobile - I want 2-3 logos per row in mobile? www.kindenterprises.co Thanks heaps! Sophie It looks complex. I will check & let you know soon Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LeauxFi Posted February 21, 2022 Share Posted February 21, 2022 On 2/19/2022 at 5:48 AM, tuanphan said: Add to Design > Custom CSS /* Leauxfi mobile 4 icons */ @media screen and (max-width:767px) { div#page-section-620a01bb12e07a50b7e99b18>.row:nth-child(2)>.col { width: 25% !important; float: left !important; } } Hey @tuanphan thank you for the help. Incredible how simple a code it was. But. There was an issue. Once I reintroduced the other CSS code to get the vertical align right on desktop viewing, it broke the code you showed and suddenly only 2 out of the 4 icons can be seen on mobile. So i guess something about removing the padding in that section is messing with the rows of the code you provided? Maybe? I've attached a pic below of how it looks on mobile ones this code below is active: //member page social link footers section[data-section-id="620a01bb12e07a50b7e99b18"] .row { display: flex; align-items: center; justify-content: center; } section[data-section-id="620a01bb12e07a50b7e99b18"] .row .col .sqs-block { padding-top: 0px !important; padding-bottom: 0px !important; } instead of Link to comment
Cyperpunk-girl-333 Posted March 16, 2022 Share Posted March 16, 2022 Hello How would I display these three images side by side on my website. The images have been uploaded as image blocks with button blocks under each image. On desktop they display side my side in a row of 3 images with buttons below In Mobile view the stack on top of each other with buttons below Link to comment
tuanphan Posted March 16, 2022 Share Posted March 16, 2022 5 hours ago, christina_marie_333 said: Hello How would I display these three images side by side on my website. The images have been uploaded as image blocks with button blocks under each image. On desktop they display side my side in a row of 3 images with buttons below In Mobile view the stack on top of each other with buttons below Can you share link to page where you have problem? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Cyperpunk-girl-333 Posted March 21, 2022 Share Posted March 21, 2022 On 3/16/2022 at 4:41 PM, tuanphan said: Can you share link to page where you have problem Hello yes Www.enchantanddelight.com.au Page homepage. Three images on child three. I would like the buttons and images to display side by side like the display on desktop. Also same with child two. I would like that image block card to display with the text and title txt beside the image of the woman holding candles instead of the mobile format with the text below the image. I really can't wait for sqaurespace to make it easier to edit mobile view Any help would be appropriated as my client things her site looks too busy. If you have any other suggestions that would be great? Maybe a better idea for displaying reviews? Thank you Link to comment
Cyperpunk-girl-333 Posted March 21, 2022 Share Posted March 21, 2022 On 1/18/2021 at 5:13 PM, tuanphan said: Add to Design > Custom CSS /* services side by side */ @media screen and (max-width:767px) { div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 { width: 33.33% !important; float: left !important; } div#page-section-5fc481be9b1ed035386d54af>.row>.span-4 * { font-size: 12px; } } How do you find the div section I.d and what sods span- mean 🙂 try trying to apply this to my clients website images have text boxes under them as well in desktop view it looks nice. In movie view it looks terrible Link to comment
tuanphan Posted March 22, 2022 Share Posted March 22, 2022 #1. Page homepage. Three images on child three. I would like the buttons and images to display side by side like the display on desktop. You mean Product Lists on homepage (shop page)? https://enchantanddelight.com.au/ Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mcgharios Posted April 4, 2022 Share Posted April 4, 2022 (edited) looking to have a 3x3 images for the following logos under "/vendors" page on mobile only: XXXXX.squarespace.com/XXXXX pass: 1234 Edited April 6, 2022 by mcgharios Link to comment
tuanphan Posted April 4, 2022 Share Posted April 4, 2022 46 minutes ago, mcgharios said: looking to have a 3x3 images for the following logos under "/vendors" page on mobile only: crestan.squarespace.com/vendors pass: 7777 I think 3 items/row is not possible. If you want 2 items/row, we can check & give the code mcgharios 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mcgharios Posted April 4, 2022 Share Posted April 4, 2022 (edited) 7 hours ago, tuanphan said: I think 3 items/row is not possible. If you want 2 items/row, we can check & give the code @tuanphan thanks for the quick reply. Yes, 2 rows will also work for me , awaiting the code... Edited April 4, 2022 by mcgharios Link to comment
mcgharios Posted April 4, 2022 Share Posted April 4, 2022 figured it out: @media screen and (max-width:767px) { div#page-section-6239f21805e2e555229c40f1>.row>.col>.row>.col { width: 50% !important; float: left !important; } } Thanks tuanphan 1 Link to comment
Klintholm Posted February 27, 2023 Share Posted February 27, 2023 I want to do the same with my logowall at the bottom of www.reload.dk Three images on a row on mobile. Thanks! Link to comment
Klintholm Posted February 27, 2023 Share Posted February 27, 2023 I think I solved it using/* Mobile gallery */@media screen and (max-width:767px) {.gallery-grid-wrapper {grid-template-columns: repeat(3,1fr) !important;}} At least on the phone, it looks good! tuanphan 1 Link to comment
rrooo Posted May 20, 2023 Share Posted May 20, 2023 I'm looking to get the same studiorrooo.ca Link to comment
tuanphan Posted May 22, 2023 Share Posted May 22, 2023 On 5/21/2023 at 6:00 AM, rrooo said: I'm looking to get the same studiorrooo.ca Add to Design > Custom CSS /* masonry 3 items */ @media only screen and (max-width:767px) { .gallery-masonry .gallery-masonry-wrapper { columns: 3; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
rrooo Posted May 22, 2023 Share Posted May 22, 2023 9 hours ago, tuanphan said: /* masonry 3 items */ @media only screen and (max-width:767px) { .gallery-masonry .gallery-masonry-wrapper { columns: 3; column-gap: 0; height: auto!important; display: block!important; padding: 0px; } .gallery-masonry-item-wrapper { height: auto!important; } .gallery-masonry-item { position: relative!important; transform: none!important; width: 100%!important; display: block; padding: 1.5px!important; box-sizing: border-box; } .gallery-masonry .gallery-masonry-item img { height: 100%!important; width: 100%!important; } } Wow Thank you!! Link to comment
myakk Posted August 5, 2023 Share Posted August 5, 2023 Hi @tuanphan, On my desktop browser I have a several galleries with three images per row. However, when viewing it on a mobile device they become 2 image rows. I've tried several codes on this forum with no luck. Can you help? josephlim.us Also - I'm wondering if I can add my tagline "cinematographer" to display beneath my name centered in the mobile version. Link to comment
tuanphan Posted August 6, 2023 Share Posted August 6, 2023 On 8/5/2023 at 11:33 AM, myakk said: Hi @tuanphan, On my desktop browser I have a several galleries with three images per row. However, when viewing it on a mobile device they become 2 image rows. I've tried several codes on this forum with no luck. Can you help? josephlim.us Also - I'm wondering if I can add my tagline "cinematographer" to display beneath my name centered in the mobile version. Sent in message. Use this code (Design > Custom CSS or Website > Website Tools > Custom CSS) /* Mobile Homepage 3 columns */ @media screen and (max-width:640px) { body.homepage .gallery-block .slide { width: 33.333% !important; } body.homepage .sqs-layout .sqs-row .gallery-block.sqs-block { padding-top: 5px !important; padding-bottom: 5px !important; } a.Mobile-bar-branding:after { content: "CINEMATOGRAPHER"; display: block; font-size: 16px; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SootheSkinBar Posted November 1, 2023 Share Posted November 1, 2023 Also need help with this issue could need the 4 buttons side by side at the top on mobile view. website is www.sootheskinbar.com/services and password is cssistheworst Link to comment
tuanphan Posted November 3, 2023 Share Posted November 3, 2023 On 11/1/2023 at 12:40 PM, SootheSkinBar said: Also need help with this issue could need the 4 buttons side by side at the top on mobile view. website is www.sootheskinbar.com/services and password is cssistheworst Just edit that page > Click Mobile icon on top right > Then drag them to make your desired layout Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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