Shell16 Posted November 4, 2021 Share Posted November 4, 2021 Site URL: https://www.shellmarie.com/ I'm looking to spruce up my website landing page as the "Book a Session" button isn't too easy to find on a mobile version. We appreciate it if someone could provide a custom code for this. Thanks! 🙂 Website: https://www.shellmarie.com/ Beyondspace 1 Link to comment
Solution Beyondspace Posted November 4, 2021 Solution Share Posted November 4, 2021 (edited) 45 minutes ago, Shell16 said: Site URL: https://www.shellmarie.com/ I'm looking to spruce up my website landing page as the "Book a Session" button isn't too easy to find on a mobile version. We appreciate it if someone could provide a custom code for this. Thanks! 🙂 Website: https://www.shellmarie.com/ You can try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { .header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta { display: block; } .header-actions.header-actions--right { position: absolute; width: 100%; } .icon.icon--fill { display: none; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Edited November 4, 2021 by bangank36 Shell16 and paul2009 1 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Shell16 Posted November 4, 2021 Author Share Posted November 4, 2021 21 minutes ago, bangank36 said: You can try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { .header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta { display: block; } .header-actions.header-actions--right { position: absolute; width: 100%; } .icon.icon--fill { display: none; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Omg it worked!! Thanks so much, @bangank36 🙏 Beyondspace 1 Link to comment
SKP Posted August 27, 2022 Share Posted August 27, 2022 On 11/5/2021 at 2:28 AM, bangank36 said: You can try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { .header .header-actions, .header .header-actions-action--social, .header .header-actions-action--cta { display: block; } .header-actions.header-actions--right { position: absolute; width: 100%; } .icon.icon--fill { display: none; } } Let me know how it works on your site Support me by pressing 👍 if this useful for you Hi there, this code work great 🙂 thank you. how can I right align this button, please? Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 13 hours ago, SKP said: Hi there, this code work great 🙂 thank you. how can I right align this button, please? What is your site url? 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
RAStrayer Posted October 17, 2023 Share Posted October 17, 2023 Love this CSS, just what I needed, thank you. Does anyone know what CSS can adjust the height/width? I'd like the button to appear smaller... Link to comment
tuanphan Posted October 19, 2023 Share Posted October 19, 2023 On 10/17/2023 at 9:36 AM, RAStrayer said: Love this CSS, just what I needed, thank you. Does anyone know what CSS can adjust the height/width? I'd like the button to appear smaller... Add this CSS code to Website Tools > Custom CSS @media screen and (max-width:767px) { a.btn { padding: 5px 10px !important; } } paul2009 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
RAStrayer Posted October 21, 2023 Share Posted October 21, 2023 Thank you so much!! It looks so good now 🙂 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