Buttons on Banner Slideshow not aligned with Card/Title

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 🙂

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

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!

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

On 3/13/2024 at 4:46 PM, tuanphan said:

PC2024

password is incorrect

Apologies its 2024PC

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

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?

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

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