Jump to content

Photos in accordion dropdown

Go to solution Solved by tuanphan,

Recommended Posts

Here is the full code 

.accordion-item__description:before{ content:" "; display:block; width:250px; height:120px; background-image:url(gus.jpg); background-size:contain; background-repeat:no-repeat; margin-right:15px }

.accordion-item:nth-child(2) .accordion-item__description:before{ background-image: url(shawn.png)!important }

.accordion-item:nth-child(3) .accordion-item__description:before{ content:none!important }

.accordion-item__description{ display:flex!important }

Link to comment
  • Solution

Change this code

#block-yui_3_17_2_1_1716759942208_4259 .accordion-item__description:before {
    content: " ";
    display: block;
    width: 900px !important;
    height: 200px;
    background-image: url(https://static1.squarespace.com/static/6403b613848fa226f7705708/t/665b9ba1087c235fa201c7ef/1717279663033/priscilla-du-preez-aPa843frIzI-unsplash+copy.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 15px
}

to this

#block-yui_3_17_2_1_1716759942208_4259 .accordion-item__description:before {
    content: " ";
    display: inline-block;
    width: 200px !important;
    float: left;
    margin-right: 10px;
    height: 200px;
    background-image: url(https://static1.squarespace.com/static/6403b613848fa226f7705708/t/665b9ba1087c235fa201c7ef/1717279663033/priscilla-du-preez-aPa843frIzI-unsplash+copy.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 15px
}

image.thumb.png.89d57496df0c81bad97c2c022b411a63.png

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

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.