KasperBed99 Posted May 14, 2022 Share Posted May 14, 2022 Site URL: https://www.ditbaderum.dk Hi guys, I want to always have two buttons on the bottom of the screen on mobile exactly as shown on the screenshot. Is this possible to do in Squarespace with some code? Thank you Best regards Link to comment
paul2009 Posted May 14, 2022 Share Posted May 14, 2022 (edited) On 5/14/2022 at 9:42 AM, KasperBed99 said: I want to always have two buttons on the bottom of the screen on mobile exactly as shown on the screenshot. Is this possible to do in Squarespace with some code? Yes, you could add some HTML through code injection to achieve this. The simplest approach would be to create the buttons with some HTML and then use a little CSS to style those buttons to: only appear on mobile match other buttons on the site remain fixed to the bottom of the page, and (optionally) save valuable screen estate by sliding the buttons out of view as the user scrolls down the page, but make it available whenever they scroll up. However, to do this you'll need to be on a Business Plan or above. Was this post helpful? Please give feedback by clicking an icon below ⬇️ Edited May 15, 2022 by paul2009 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 Hi @paul2009, Thank you for your response. I am on business plan. You know a code? Link to comment
Beyondspace Posted May 14, 2022 Share Posted May 14, 2022 One solution you can try following steps: - Edit the footer - Add a space block at the end - Add 2 button block after the space block - Hold and drag the button into 2 columns: https://recordit.co/2xparpJ4fz - Use the space block id to selector the buttons to set the Css style as you wish 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
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 Hi @bangank36, Thanks for your reply. Isn't there required some code to only show on mobile and make them fixed or? Link to comment
Beyondspace Posted May 14, 2022 Share Posted May 14, 2022 1 minute ago, KasperBed99 said: Hi @bangank36, Thanks for your reply. Isn't there required some code to only show on mobile and make them fixed or? It can be accomplished via some Css code: - media query to set style only on mobile - position with fixed to set it buttom-fixed on mobile @media only screen and (max-width: 767px) { /*style for mobile*/ You selector { position: fixed; bottom: 0; } } @media only screen and (min-width: 768px) { /*hide these buttons for the device with the larger width than mobile*/ You selector { display: none; } } Here is the combination of media query and setting position 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 May 14, 2022 Share Posted May 14, 2022 In addition to that, you can use the this extension to get the right id: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en 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
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 Hi @bangank36, Thank you. However, it doesn't seem to be working when I use the Block-ID as selector? Link to comment
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 You want me to target the block or section? Tried both now, neither works... Link to comment
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 @bangank36 this is the code I did /* buttons footer on MOBILE */ @media only screen and (max-width: 767px) { /*style for mobile*/ #block-yui_3_17_2_1_1652521959585_13957, #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316 { position: fixed; bottom: 0; } } @media only screen and (min-width: 768px) { /*hide these buttons for the device with the larger width than mobile*/ #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 { display: none; } } Link to comment
Beyondspace Posted May 14, 2022 Share Posted May 14, 2022 44 minutes ago, KasperBed99 said: @bangank36 this is the code I did /* buttons footer on MOBILE */ @media only screen and (max-width: 767px) { /*style for mobile*/ #block-yui_3_17_2_1_1652521959585_13957, #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316 { position: fixed; bottom: 0; } } @media only screen and (min-width: 768px) { /*hide these buttons for the device with the larger width than mobile*/ #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 { display: none; } } This code make your elements hidden Try replacing yours with the following one /* buttons footer on MOBILE */ @media only screen and (max-width: 767px) { /*style for mobile*/ #block-yui_3_17_2_1_1652521959585_13957 + .row { position: fixed; bottom: 0; display: flex; justify-content: center; width: 100% !important; z-index: 99999; } } @media only screen and (min-width: 768px) { /*hide these buttons for the device with the larger width than mobile*/ #block-yui_3_17_2_1_1652520379430_66609, #block-yui_3_17_2_1_1652520379430_64316, #block-yui_3_17_2_1_1652521959585_13957 { display: none; } } /*fix for the hidden section*/ @media screen and (max-width: 1000px){ section[data-section-id="6267ae66a6bcb36a42a24e46"] { display: block; } } 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 May 14, 2022 Share Posted May 14, 2022 (edited) Still need more css style to make these button fit your desire Edited May 14, 2022 by bangank36 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
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 @bangank36 Thank you so much for your time. Really appreciate it🙏 This code is out of my hands... I only do the very basics of css... unfortunately its too hard for me Link to comment
paul2009 Posted May 14, 2022 Share Posted May 14, 2022 2 hours ago, KasperBed99 said: You know a code? I’ll write some for you when I’m at the computer. About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
KasperBed99 Posted May 14, 2022 Author Share Posted May 14, 2022 @paul2009 Thanks a lot! Link to comment
KasperBed99 Posted May 15, 2022 Author Share Posted May 15, 2022 Hi @paul2009 I still haven't been able to solve it. Please help😂 Link to comment
KasperBed99 Posted May 15, 2022 Author Share Posted May 15, 2022 Hi @paul2009, I did it for desktop with one button. Maybe we could use kind of the same code? There is some custom css for the look of the buttons as well. Here is the code: /* Fixed button on bottom of screen */ @media screen and (min-width: 768px) { .page-section[data-section-id="6280ae4e215cde1811b8597c"] { position: fixed; background: transparent; bottom: 0px; left:0; right:0; z-index: 9999; min-height: 30px!important; .section-background { background: transparent; } .content-wrapper { padding: 0px!important; } .sqs-block-button-element--large { border-radius: 0px; border-top-left-radius: 50px 50px; font-size: 1.3rem; background: #b98b82 !important; box-shadow: inset 0 0 0 0.09px #ceaea8 !important; padding: 20px 55px 18px 60px !Important; filter: drop-shadow(10px 10px 30px rgba(0,0,0,.30)) !important; } .sqs-block-button-element--large:hover { box-shadow: inset 400px 0 0 0 #ceaea8 !important; } } } @media screen and (max-width: 767px) { .page-section[data-section-id="6280ae4e215cde1811b8597c"] { display: none; } } Link to comment
paul2009 Posted May 15, 2022 Share Posted May 15, 2022 On 5/14/2022 at 9:42 AM, KasperBed99 said: I want to always have two buttons on the bottom of the screen on mobile exactly as shown on the screenshot. I have drafted a quick guide that explains how to add a CTA bar with two buttons as you described: Mobile CTA footer for Squarespace 7.1 Please take a look and let me know how you get on. Note that if you've already added any button code to the site, you'll want to remove this before you get started. Was this post helpful? Please give feedback by clicking an icon below ⬇️ florencepicol and ElineBredesen 2 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
KasperBed99 Posted May 15, 2022 Author Share Posted May 15, 2022 Hi @paul2009 I have already added a lot of code for my buttons. These I can not remove... If you take a look at my site now, I have done it with one button. Isn't it possible with some css to make to next to each other with display: flex and width: 50% or something? You can see it here: https://www.ditbaderum.dk Link to comment
ElineBredesen Posted April 18 Share Posted April 18 @paul2009 Hello. Thank you for the code. It worked perfectly. But I need to edit the fonts on the buttons. Do you have a code for that as well? Link to comment
paul2009 Posted April 18 Share Posted April 18 45 minutes ago, ElineBredesen said: Thank you for the code. It worked perfectly. But I need to edit the fonts on the buttons. Do you have a code for that as well? The buttons will use the site styles for 'Secondary Buttons', so the easiest way to set them is via the Site Styles panel. However, if you want to use some CSS to change these independently of other secondary buttons, you should be able to use the custom CSS below, using your font name instead of the example: .sf-mobile-cta-btn a.sqs-block-button-element { font-family: ltc-bodoni-175; } I hope this helps! Did this help? Please give feedback by clicking an icon below ⬇️ tuanphan 1 About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
HOMENCREATIVE Posted August 29 Share Posted August 29 @paul2009 Hi Paul! Is there a way to turn off the "slide in and out" as you scroll up and down? I basically want the CTA button bar to stay fixed the entire time you scroll. I used your code successfully, I just can't figure out how to edit the HTML so that it doesn't disappear. Thanks!! Link to comment
paul2009 Posted August 29 Share Posted August 29 20 minutes ago, HOMENCREATIVE said: Is there a way to turn off the "slide in and out" as you scroll up and down? Yes, sure. When you paste the code in step 1.2, don't include the section that starts and ends with a script tag (rows 19 to 34). About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. Content: Links in my posts may refer to SF Digital products or may be affiliate links. If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too. Link to comment
HOMENCREATIVE Posted August 29 Share Posted August 29 @paul2009 amazing - thank you! It does work, although it goes behind the footer once you scroll all the way down. Which means it will only stay fixed until you get to the footer section, then it disappears. Any idea how to prevent that? 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