dv_louise_designs Posted March 13, 2022 Share Posted March 13, 2022 Site URL: https://www.adeptbenefits.com Hi! I have been having the hardest time centering the title and description of the simple list block of my Meet the Team page for a client I've been designing a site for. Here's the code I have, I know it's not perfect but it's working for the most part: //mobile version - meet the team// @media only screen and (max-width: 767px) { section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title { font-weight: normal!important; font-size: 16pt !important; font-weight:700!important; font-size: 1rem; margin-right: 195px; padding-bottom: 0px; padding-top: 30px; } .user-items-list-item-container .list-item-content__description { font-size:10pt!important; text-align: center!important; margin-right: 300px; } .user-items-list-simple .list-item-content { width: 300%; height: 2vh; } .user-items-list-simple img{ max-width: 900px!important; margin: 0 auto!important; } } Help me center the descriptions, especially??? (Password is Employee180!) Link to comment
Beyondspace Posted March 13, 2022 Share Posted March 13, 2022 6 hours ago, dv_louise_designs said: Site URL: https://www.adeptbenefits.com Hi! I have been having the hardest time centering the title and description of the simple list block of my Meet the Team page for a client I've been designing a site for. Here's the code I have, I know it's not perfect but it's working for the most part: //mobile version - meet the team// @media only screen and (max-width: 767px) { section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title { font-weight: normal!important; font-size: 16pt !important; font-weight:700!important; font-size: 1rem; margin-right: 195px; padding-bottom: 0px; padding-top: 30px; } .user-items-list-item-container .list-item-content__description { font-size:10pt!important; text-align: center!important; margin-right: 300px; } .user-items-list-simple .list-item-content { width: 300%; height: 2vh; } .user-items-list-simple img{ max-width: 900px!important; margin: 0 auto!important; } } Help me center the descriptions, especially??? (Password is Employee180!) Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px){ section[data-section-id="6215672720d4727b3982a809"] .user-items-list-simple .list-item-content { height: auto ; width: 100%; } section[data-section-id="6215672720d4727b3982a809"] { padding: 0; } section[data-section-id="6215672720d4727b3982a809"] .list-item-content__description p { text-align: center !important; } } Let me know how it works on your site dv_louise_designs 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
Beyondspace Posted March 13, 2022 Share Posted March 13, 2022 My testing dv_louise_designs 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
dv_louise_designs Posted March 14, 2022 Author Share Posted March 14, 2022 15 hours ago, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px){ section[data-section-id="6215672720d4727b3982a809"] .user-items-list-simple .list-item-content { height: auto ; width: 100%; } section[data-section-id="6215672720d4727b3982a809"] { padding: 0; } section[data-section-id="6215672720d4727b3982a809"] .list-item-content__description p { text-align: center !important; } } Let me know how it works on your site @bangank36It worked really well! Thank you! Can you also help me with changing the font-size of the section title, and reducing space between list items? Link to comment
IXStudio Posted March 14, 2022 Share Posted March 14, 2022 5 hours ago, dv_louise_designs said: @bangank36It worked really well! Thank you! Can you also help me with changing the font-size of the section title, and reducing space between list items? Hi, Use this code in Design -> Custom CSS section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__title { font-size: 22px !important; } section[data-section-id="6215672720d4727b3982a809"] .user-items-list-item-container .list-item-content__description { font-size: 14px !important; } .user-items-list-item-container[data-section-id="6215672720d4727b3982a809"] {grid-gap: 50px 20px !important;} Please use the like button if it helps you! Best, Leopold dv_louise_designs 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
dv_louise_designs Posted March 18, 2022 Author Share Posted March 18, 2022 Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks! Link to comment
tuanphan Posted March 19, 2022 Share Posted March 19, 2022 On 3/18/2022 at 12:18 PM, dv_louise_designs said: Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks! Which page are you referring to? 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
IXStudio Posted March 23, 2022 Share Posted March 23, 2022 On 3/18/2022 at 4:18 AM, dv_louise_designs said: Hi @IXStudio! That was very helpful. Was wondering if you could help with another part of that site - everything was good until recently and the list got all jumbled in mobile again. Any help would be great! I also can't seem to edit either "The Problem" or "The Solution" text to change size. Thanks! You are welcome! Please let me know which page are there? Please use the like button if it helps you! Best, Leopold tuanphan and dv_louise_designs 1 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD 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