Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Background colour behind arrow link


spotonlynne

Question

  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

10 answers to this question

Recommended Posts

  • 0

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

image.thumb.png.0659ec614a39d2188c9811dbb59318c8.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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
  • 0

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
  • 0

@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
  • 0

You want arrows appear on right of text on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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...