Jump to content

Two buttons on bottom of screen MOBILE

Recommended Posts

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 by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment

One solution you can try following steps:

- Edit the footer

- Add a space block at the end

image.thumb.png.b4e60db3bee1edc3a162e1b6f3570fd1.png

- 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, Keyword Highlighter
If 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
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, Keyword Highlighter
If 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

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, Keyword Highlighter
If 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

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

image.thumb.png.08518af544bbe6290b465df4de6f8352.png

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, Keyword Highlighter
If 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

image.thumb.png.9cd71c2bfd6d32a57e4ba5ae7c90ffa1.png

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

Edited 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, Keyword Highlighter
If 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
2 hours ago, KasperBed99 said:

You know a code?

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment

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

image.gif.ed46e50e8f8cd10f10747c5544e420ef.gif

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.

Buy me a coffee

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.