Jump to content

Aligning buttons and line blocks vertically

Recommended Posts

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

Screenshot (currently).png

Screenshot (desired effect - ignore red lines).png

Edited by spotonlynne
No response. Added CSS tag and better explanation.
Link to comment
  • Replies 2
  • Views 413
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;

}

}

 

Screenshot 2022-01-18 at 09.24.18.png

Edited by spotonlynne
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.