Jump to content

Buttons on Banner Slideshow not aligned with Card/Title

Recommended Posts

I have used a few codes for other areas so not sure if that is what is affecting this section. 
I just want to have the blue box aligned inside the white box. But also the white box is slightly wider on the right than the left so want to make this even.

Please help 🙂

buttons.png

Link to comment

@LeeC8 Can you share the url and let us know what code you used? It looks like you added the white outline, correct?

Did we help? Click 👍 or mark it as the solution! This helps others find the answers they need. 

Meghan, Owner of Westerly Creative Studio
👩‍💻 🍪  Need a low-cost website policies + cookie banner? Termageddon makes it easy.  Get 10% off your first year! (< affiliate link) 

Link to comment
Posted (edited)

https://www.pcconstructionco.com.au/ PW PC2024

CODE:

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    height: 95%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

I used this code because I wanted the our services to be clickable. If there's a better code to use, please let me know. 

Thank you!

Edited by LeeC8
Link to comment
7 hours ago, LeeC8 said:

https://www.pcconstructionco.com.au/ PW PC2024

CODE:

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 92%;
    height: 95%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

I used this code because I wanted the our services to be clickable. If there's a better code to use, please let me know. 

Thank you!

PC2024

password is incorrect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/15/2024 at 12:09 PM, LeeC8 said:

Apologies its 2024PC

To remove white around, use this CSS code

.user-items-list-item-container[data-section-id="65e73e651a04034c1864deb3"] a.list-item-content__button {
    border: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/16/2024 at 4:06 PM, tuanphan said:

To remove white around, use this CSS code

.user-items-list-item-container[data-section-id="65e73e651a04034c1864deb3"] a.list-item-content__button {
    border: none !important;
}

 

 

Thank you so much! When I look on mobile view, the words are all squished and I can't edit it. Any idea how I can fix this?

Link to comment
On 3/21/2024 at 4:43 PM, LeeC8 said:

 

Thank you so much! When I look on mobile view, the words are all squished and I can't edit it. Any idea how I can fix this?

You can use this CSS code for mobile

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65e73e651a04034c1864deb3"] li.list-item {
   padding-left: 2% !important;
    padding-right: 2% !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
On 3/24/2024 at 6:20 PM, tuanphan said:

You can use this CSS code for mobile

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="65e73e651a04034c1864deb3"] li.list-item {
   padding-left: 2% !important;
    padding-right: 2% !important;
}
}

 

Thank you so much that 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...

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.