DotcomMarket Posted May 16, 2022 Share Posted May 16, 2022 Hi Team, Mobile CSS hack request pls 💭: I would like to change a collection of 9 text blocks (within a collection), so they appear side by side on mobile vs. as one column of 9 rows (attachments show desktop vs. mobile views). Has anyone been able to create code this for a specific collection, please - also without impacting other collections? My hack below isn't working. @media only screen and (max-width:640px) { #collection-61bf528042424e65709dee0a.user-items-list-simple:not([data-num-columns="1"]!important) { grid-template-columns: repeat(3,1fr)!important; grid-gap: 10px!important} .list-item-content__title{font-size: .8rem!important} .list-item{padding: .8rem!important} } Many thanks 🙂 Lu Link to comment
Beyondspace Posted May 17, 2022 Share Posted May 17, 2022 On 5/16/2022 at 9:30 PM, DotcomMarket said: Hi Team, Mobile CSS hack request pls 💭: I would like to change a collection of 9 text blocks (within a collection), so they appear side by side on mobile vs. as one column of 9 rows (attachments show desktop vs. mobile views). Has anyone been able to create code this for a specific collection, please - also without impacting other collections? My hack below isn't working. @media only screen and (max-width:640px) { #collection-61bf528042424e65709dee0a.user-items-list-simple:not([data-num-columns="1"]!important) { grid-template-columns: repeat(3,1fr)!important; grid-gap: 10px!important} .list-item-content__title{font-size: .8rem!important} .list-item{padding: .8rem!important} } Many thanks 🙂 Lu we can check more easily if you share your site with site-wide password DotcomMarket 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
DotcomMarket Posted May 18, 2022 Author Share Posted May 18, 2022 Thanks @bangank36 - just launched at https://www.thecentreforhealth.co.uk/. Thank you 🙂 Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 Which page are you referring to? No buttons on homepage DotcomMarket 1 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
DotcomMarket Posted May 23, 2022 Author Share Posted May 23, 2022 I managed to add this CSS, for mobile only, which works across the site quite well. @media only screen and (max-width: 640px) { .user-items-list-item-container {grid-template-columns: 1fr 1fr;} } However... Do you have a CSS hack to create CSS for one page, to... Image 1: Reduce the 9 list content items into 3 x 3 (instead of 2 x 2 + 1), including a font reduction (so it looks neat) Image 2: Can the header text be reduced to fit to one line? Here's the page: https://bit.ly/3yR9gi0. Many thanks 🙂 Link to comment
tuanphan Posted May 24, 2022 Share Posted May 24, 2022 Use this CSS @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] { grid-template-columns: repeat(3,1fr); } .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * { font-size: 14px !important; }} DotcomMarket 1 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
DotcomMarket Posted May 24, 2022 Author Share Posted May 24, 2022 (edited) Thanks @tuanphan 🤗 I've tried to expand on your lovely CSS - if wanting to vertically + horizontally align the text to the cell, e.g. as per attached image (longer words wrap to a second line, others don't = untidy), do you have better CSS than me, please: vertical-align: middle; text-align: center !important; Warm regards, L @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] { grid-template-columns: repeat(3,1fr); } .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * { font-size: 12px !important; vertical-align: middle; text-align: center !important; } } Edited May 24, 2022 by DotcomMarket Link to comment
tuanphan Posted May 25, 2022 Share Posted May 25, 2022 11 hours ago, DotcomMarket said: Thanks @tuanphan 🤗 I've tried to expand on your lovely CSS - if wanting to vertically + horizontally align the text to the cell, e.g. as per attached image (longer words wrap to a second line, others don't = untidy), do you have better CSS than me, please: vertical-align: middle; text-align: center !important; Warm regards, L @media screen and (max-width:767px) { .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] { grid-template-columns: repeat(3,1fr); } .user-items-list-item-container[data-section-id="62518b7a978772320ff66efb"] * { font-size: 12px !important; vertical-align: middle; text-align: center !important; } } To align center vertical, use this attribute .list-item-content { justify-content: center !important; } DotcomMarket 1 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
DotcomMarket Posted May 26, 2022 Author Share Posted May 26, 2022 Legend, thanks @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