Domenic Posted January 24, 2022 Share Posted January 24, 2022 Site URL: https://adicovintage.com.au/ Hi I am just after some help I have added a section with images and a link on my website. They are the perfect size when on my laptop or computer. They also have the faded grey when you hover over which is what I want. My problem is that on mobile devices they are coming out like this on mobile: Just so big and taking way too much space. It looks real ugly. I want the 4 of them to look like this on the mobile (this was done with gallery selection). In a group of 4 neatly spaced and perfect size. Any assistance will be really appreciated! Link to comment
Domenic Posted January 24, 2022 Author Share Posted January 24, 2022 3 hours ago, bangank36 said: I try the following code and it fixes for the first section @media only screen and (max-width: 767px) { section[data-section-id="60d42efe808384202ace9c66"] { height: 77vh; } section[data-section-id="60d42efe808384202ace9c66"] .section-background { height: 0; padding-bottom: 100%; margin-top: 134.75px; } section[data-section-id="60d42efe808384202ace9c66"] .section-background img{ height: auto !important; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Thank you for sending that but that did not work.😟 Link to comment
Solution Beyondspace Posted January 24, 2022 Solution Share Posted January 24, 2022 6 hours ago, Domenic said: Thank you for sending that but that did not work.😟 Sorry for misunderstand, you can try the following code @media only screen and (max-width: 767px) { section[data-section-id="61ee26f985cdd239889af3b7"] .sqs-layout > .row > .col { width: 50% !important; float: left !important; } section[data-section-id="61ee26f985cdd239889af3b7"] .sqs-layout > .row > .col > .sqs-block { padding: 2px !important; } } Let me know how it works on your site Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
Domenic Posted January 25, 2022 Author Share Posted January 25, 2022 7 hours ago, bangank36 said: Sorry for misunderstand, you can try the following code @media only screen and (max-width: 767px) { section[data-section-id="61ee26f985cdd239889af3b7"] .sqs-layout > .row > .col { width: 50% !important; float: left !important; } section[data-section-id="61ee26f985cdd239889af3b7"] .sqs-layout > .row > .col > .sqs-block { padding: 2px !important; } } Let me know how it works on your site Thank you for this, works perfect! Beyondspace 1 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