Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Button on the center of box border


JCB

Question

7 answers to this question

Recommended Posts

  • 0
7 hours ago, JCB said:

Site URL: https://www.sarahbucklandcoaching.com/sfsa

Hi!

Password is: sbc (this section is at the bottom)

Using flexbox for the 3 boxes here, but is it possible to make the buttons align to the center of the bottom border of the box? Like in this image:

 

Thanks

2135011563_Screenshot2021-07-17at5_10_44am.png.7908890b6fb0bb311d31779c134e1e92.png

try

#block-yui_3_17_2_1_1626467746037_19774 +.row  .sqs-block-button {
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15%;
  width: 250px;
}
#block-yui_3_17_2_1_1626467746037_19774 + .row .sqs-block-button a {
  border: 2px solid #fff;
} 

image.thumb.png.9f597f488200216994eab999ed4d7d75.png

Greeting, it's BaNgan from 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, Portfolio hover Replace Link Style
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
  • 0
On 7/17/2021 at 12:35 PM, bangank36 said:

try

#block-yui_3_17_2_1_1626467746037_19774 +.row  .sqs-block-button {
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15%;
  width: 250px;
}
#block-yui_3_17_2_1_1626467746037_19774 + .row .sqs-block-button a {
  border: 2px solid #fff;
} 

image.thumb.png.9f597f488200216994eab999ed4d7d75.png

That worked, thank you!

Link to comment
  • 0
On 7/17/2021 at 12:35 PM, bangank36 said:

try

#block-yui_3_17_2_1_1626467746037_19774 +.row  .sqs-block-button {
  position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15%;
  width: 250px;
}
#block-yui_3_17_2_1_1626467746037_19774 + .row .sqs-block-button a {
  border: 2px solid #fff;
} 

image.thumb.png.9f597f488200216994eab999ed4d7d75.png

Sorry just saw this! Yes, would love your help on the tablet related items!

And I need help with adding a background image on the mobile menu, it doesn't appear. I also can't seem to change the colour of the mobile menu icon, just the close one.

Thank you!

Link to comment
  • 0
On 7/30/2021 at 2:53 AM, JCB said:

Sorry just saw this! Yes, would love your help on the tablet related items!

And I need help with adding a background image on the mobile menu, it doesn't appear. I also can't seem to change the colour of the mobile menu icon, just the close one.

Thank you!

You mean add background image for mobile overlay menu?

To change burger icon color, use this CSS

.burger-inner>div {
    background: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 8/1/2021 at 10:17 AM, tuanphan said:

You mean add background image for mobile overlay menu?

To change burger icon color, use this CSS

.burger-inner>div {
    background: red !important;
}

 

Thank you! 

 Yes, I meant adding a background image for mobile overlay menu?

Link to comment
  • 0
20 hours ago, JCB said:

Thank you! 

 Yes, I meant adding a background image for mobile overlay menu?

Use this CSS

/* Overlay Menu background image */
.header-menu-bg.theme-bg--primary {
    background-image: url(https://cdn.pixabay.com/photo/2021/07/18/17/42/waterfall-6476205__340.jpg);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 8/5/2021 at 3:41 PM, tuanphan said:

Use this CSS

/* Overlay Menu background image */
.header-menu-bg.theme-bg--primary {
    background-image: url(https://cdn.pixabay.com/photo/2021/07/18/17/42/waterfall-6476205__340.jpg);
}

 

Thank you, it worked!

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