Jump to content

Background colour behind arrow link

Recommended Posts

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

Arrow link background - desktop version.png

Arrow link background - mobile version.png

Link to comment
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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

Link to comment

@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

Link to comment
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;
}
}

 

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
  • 1 month later...
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

Design Requirement - Arrow link background (mobile version).png

Design Requirement - Arrow link background (desktop version).png

Current Layout.png

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.