Jump to content

Custom CSS for a Image in Accordion

Recommended Posts

Site URL: https://scottsdalebible.com/bulletin

 

  1.  Link to website: https://scottsdalebible.com/bulletin 
    password: CommsOnly!
  2. A screenshot and description of issue: 
    1. I am having trouble with my CSS code. I am trying to apply a single image to a dropdown and only want it applied to a specific accordion on the bulletin page. The image is showing in all the dropdowns when I only want it to show in the last one, Giving (5th).Screenshot2024-10-02at1_43_28PM.thumb.png.2a8f6859172c1787fbd03ac354c14486.png
    2. I would like it to appear to the left like shown below in the first dropdown but it seems to be creating multiple columns in all the dropdowns and only want a single column in all dropdowns except for the 5th, the last one, which would have 2 columns with the image added.  Screenshot2024-10-02at1_47_11PM.thumb.png.2bf6571327b95c84ffb0bb70aac42ccc.png
  3.  This is the Custom CSS that is applied to the Website Tools section:


.accordion-item__description:before{
content:" ";

display:block;
width:650px;
height:250px;
background-image:url(https://static1.squarespace.com/static/64766a690b1b63200299c21f/t/66ecb5b95aec9948b4c0770a/1726789049384/SBC-YTD-Giving-09162024-budget-chart.png);
background-size:contain;
background-repeat:no-repeat;
margin-right:25px;
margin-bottom: 10px !important;
}
.accordion-item:nth-child(5) .accordion-item__description:after{
background-image: url(https://static1.squarespace.com/static/64766a690b1b63200299c21f/t/66ecb5b95aec9948b4c0770a/1726789049384/SBC-YTD-Giving-09162024-budget-chart.png)!important
}
.accordion-item:nth-child(5) .accordion-item__description:after{
content:none!important
}
.accordion-item__description{
display:flex!important
}

Link to comment
  • Replies 2
  • Views 456
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.