Two buttons on bottom of screen MOBILE

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

Hi @paul2009,

Thank you for your response. I am on business plan.

You know a code?

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

Hi @bangank36,

Thanks for your reply. Isn't there required some code to only show on mobile and make them fixed or?

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

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

Hi @bangank36,

Thank you. However, it doesn't seem to be working when I use the Block-ID as selector?

You want me to target the block or section? Tried both now, neither works...

@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;
  }
}

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;
  }
}

Still need more css style to make these button fit your desire

@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 

2 hours ago, KasperBed99 said:

You know a code?

I’ll write some for you when I’m at the computer. 

@paul2009 Thanks a lot!

Hi @paul2009

I still haven't been able to solve it. Please help😂

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;
}
}

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  ⬇️

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

@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? 

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  ⬇️

@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!!

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).

@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?

@paul2009 I used your code successfully, however I had to increase the height of the button and add padding to the text to center it because it was showing up very narrow! Just FYI. 

Secondly, for some reason, it's showing a fill behind the text of the button even though I've updated both the "color" and "background-color" correctly.

Any idea why this is happening? The code I have is:

/*MOBILE STICKY FOOTER CTA */
/* Mobile CTA bar - Squarespace 7.1   */
/* Left (secondary) button colours */
.sf-mobile-cta-btn:nth-of-type(1) {
  background-color: #000000;
  color: #fffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
}

/* Right (primary) button colours */
.sf-mobile-cta-btn:nth-of-type(2) {
  background-color: #006837;
  color: #ffffff;
  font-family: "Futura-PT";
  font-size: 1.2rem !important; //size
  font-weight: 600 !important; //
  padding-top: 13px!important;
 
}

@media only screen and (max-width:800px) and (orientation: portrait) {
  .sf-mobile-cta-wrapper {
    display: block!important;
  }
}

.sf-mobile-cta-wrapper {
  background: #ebebeb;
  bottom: 0;
  left: 0;
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: bottom .3s;
}
.sf-mobile-cta {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  height: 50px;
}
.sf-mobile-cta-btn {
  flex-grow:1;
  flex-basis: 0;
  text-align: center;
}
/* End of navigation hover effect    */