Jump to content

Adding an image to the accordion block

Recommended Posts

URL: https://www.grdowntownmarket.com/market-hall

I have successfully figured out how to add an image to the text in an accordion block, but there has got to be a cleaner way to format the image/make it responsive. I know this code is a mess, so any help would be appreciated. Right now it does not scale well when the browser window is resized.

CSS:

//accordion margin-left
#dropdown-block-yui_3_17_2_1_1659644612474_6655-0 {
    margin-left: 72px !important;
}

// Add an image into Accordion Content
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
#collection-62b7504d182c361584382f1c
li:nth-child(1) .accordion-item__description:after {
content: "";
display: block;
height: 800px !important;
width:  800px !important;
  
//accordion MH map
background-image: url(https://static1.squarespace.com/static/62b0db0c1be03b40824ca350/t/64de3cf0725d4746c95b9c9f/1692286192924/mh_map_final_bw.png);

text-align: center !important;
scale: 61%; /* ie8 */
margin-top: -680px !important;
margin-left: 120px !important;
padding-right: 40px !important;
padding-bottom: 40px !important;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: -160px;
}

MOBILE CSS:

  //accordion margin
#dropdown-block-yui_3_17_2_1_1659644612474_6655-0 {
margin-left: 0px !important;
}
#collection-62b7504d182c361584382f1c
.accordion-item__dropdown {
padding-top: 340px !important;
 }
  
// Add an image into Accordion Content
/* nth-child(1) is first accordion item, nth-child(2) is second item... */
/* :before is image on top, :after if image on bottom */
#collection-62b7504d182c361584382f1c
li:nth-child(1) .accordion-item__description:after {
content: "";
display: block;
height: 830px !important;
width:  830px !important;

  
//accordion MH map
background-image: url(https://static1.squarespace.com/static/62b0db0c1be03b40824ca350/t/64de3cf0725d4746c95b9c9f/1692286192924/mh_map_final_bw.png);
width: 500px;
height: 500px;
text-align: center !important;
scale: 38%; /* ie8 */
margin-top: -1108px !important;
margin-left: -265px !important;
  
background-repeat: no-repeat;
background-size: cover;
  
margin-bottom: 240px;
}

 

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

You can use some code like this under to adjust its size on other screen sizes

@media screen and (max-width:1000px) and (min-width:900px) {
#collection-62b7504d182c361584382f1c li:nth-child(1) .accordion-item__description:after {
    height: 800px !important;
    width: 800px !important;
    margin-top: -680px !important;
    margin-left: 120px !important;
    margin-bottom: -160px
}}

Just an example, this code will run from 900px to 1000px. You can play around with these numbers.

Or another way is use plugin to add Accordion Block. With plugin, you can add Text Block, Image Block or any blocks into accordion content. For eg this Accordion Tab Plugin (referral link). If you need to make a quick example, you can let me know

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
On 8/21/2023 at 9:56 PM, ryanbrinkerhoff said:

Thank you. @tuanphan Is there a better way to make the image responsive than I currently have it? I've experimented with "max-width: 100%" and stuff like that with no success.

Which screen sizes do you have problem? We can give code for these sizes

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.