Adding an image to the accordion block

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;
}

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

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.

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

@tuanphan I appreciate the help. 

I can't get it to look right when the window is at its widest, around 1,300px. I'd like the map to be positioned further to the right:

When the width of the window is reduced, the map gets cropped instead of scaling. Here's 1,000px:

730px:

517px:

I find it quite difficult for you to adjust this. You can message me your email. Let me you you an accordion plugin, then you can use Image Block next to Text in Accordion Content, it should work on all devices