custom-css Background colour behind arrow link

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

Hello,

Me again! On the same site I just posted about I have also been asked to create a section with links to various pages, using an arrow with a coloured background. This needs to display differently on a mobile - see attached. Can anyone help me please, as I have tried various ways and failed.

https://weedwise.squarespace.com

Pw: W33dw1s3

Thank you!
Lynne

Hi. Can you add a spacer block in red line position?

@tuanphan I have added one after each text block and before the arrow. Or did you mean just one block?

I tried to do it by adding this code:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

#block-ui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

But nothing has changed - and I guess that would still display the arrow link on the line below in the mobile format?

L

Dear @tuanphan

ADDENDUM:

This is the code I have used so far:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

Now, I have an underline under the arrow as it is a link and need to remove it from there only (not other links on the site) and somehow get the text and arrow blocks to become one on a mobile phone.

I am learning (slowly)!

Lynne

@tuanphan sorry this is becoming a hard story for you to follow. But I have now managed to hide the line under the arrow, so the code now reads:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
  .sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

#block-yui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
.sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
.sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

It is just the alignment on a mobile that is the issue now.

Thanks for bearing with me.

Lynne

You want arrows appear on right of text on mobile?

@tuanphan Yes that is right. Do I need to add in a spacer or three spacers?

On 7/27/2021 at 9:22 PM, spotonlynne said:

@tuanphan Yes that is right. Do I need to add in a spacer or three spacers?

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1626196431052_46907+.row .span-6 .row {
    display: flex;
    align-items: center;
}
}

@tuanphan Thank you so much (again). You are a star 🤩

On 7/29/2021 at 1:39 PM, spotonlynne said:

@tuanphan Thank you so much (again). You are a star 🤩

 

@tuanphan sorry to ask you again, but the client has come back and said they would like the lines below the three snippets of text with the links to sit directly at the bottom of the background behind each text arrow link. I have attached their initial design, so you can see what I am trying to achieve and a screenprint that shows what it looks like at the moment.

They also would like to make the whole background a link to another page and not just the text arrow.

You can see it on the site:

weedwise.squarespace.com (pw: W33dw1s3)

Hope that makes sense and that you are able to advise me again.

Thank you!
Lynne