Aligning buttons and line blocks vertically

Site URL: https://weedwise.squarespace.com

Hello. Can anyone help me please? I am trying to align some customised buttons and lines on the home page of the following site:

https://weedwise.squarespace.com (pw: W33dw1s3)

There are three sections with button links to other pages, each separated by a line. What I am trying to achieve is for the line below each one to attach itself to the bottom of the button on all devices.

Currently, although I have added some CSS code for mobiles, tablets and desktop, the line still isn't in the right place and moves on different screen sizes.

I have attached two screenprints: one showing what it currently looks like and one with the desired effect. Please ignore the red lines, as they are not required.

Is there a way of using CSS to say that you want the two items to align? I'd really like to get this site live this week and this is really bugging me!

Thank you!

Lynne

Edited January 18, 2022 by spotonlynne
No response. Added CSS tag and better explanation.

PLEASE CAN ANYONE HELP AS THE SITE IS LIVE AND NOT DISPLAYING PROPERLY!

See: www.weedwise.co.uk

I had a go at it with following, but neither options worked (although the second set of code did a few weeks ago, not perfectly though). I tried both and still no joy. There must be a way of doing this so that the rule lines up with the bottom of the button in all three cases.

Here is the code I used:

/* Moving rule up on home page text links */

#block-yui_3_17_2_1_1626194606203_93732 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1626194606203_110526 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1630415360095_13134 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1633945261838_9793 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1633949444703_10177 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1633949444703_18412 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626196191825_12171 .sqs.block text {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626194606203_99648 .sqs.block text {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626194606203_116434 .sqs.block text {padding-bottom: 0px !important}

 

AND/OR

 

/* moving lines up on home page links - PC only */

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -42px !important;

}

}

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -42px !important;

}

}

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -42px !important;

}

}

 

/* moving lines up on home page links - tablet only */

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -48px !important;

}

}

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -48px !important;

}

}

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -48px !important;

}

}

 

/* moving lines up on home page links - mobile only */

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -56px !important;

}

}

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -56px !important;

}

}

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -56px !important;

}

}

 

Edited January 18, 2022 by spotonlynne

Can you explain in more detail? Looks like both screenshots above are the same?