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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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 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
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 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
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 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
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; } } 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
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 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
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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. 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