groundsy

Thanks for your help @Ziggy that worked perfectly!

Hi everyone, I've applied some styling to the accordion on the 'Air Roasting' page, but I now need another accordion on the Air-Motion 3 page, under Roasters with plain default accordion styling. I've added the accordion on the Air-Motion 3 page, but it's picking up the styling from the 1st accordion, which I don't need on this page. Is there a way to apply this styling only to the accordion on 'Air Roasting' page? .accordion-item__click-target::before { background-size: contain; content: ''; height: 40px; margin-right: 10px; width: 40px; } .accordion-item:nth-child(1) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/4ed3b787-0a03-4c60-adb8-0d5091a25d19/clock_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(2) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/eb89036b-f4b1-4a6c-9aee-0a3dd24c7b6d/recycle_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(3) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/faa4b451-ea61-49d7-98d3-111a165898f4/temp_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(4) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/ce9ff8e1-dca8-4cda-9990-05b4cff3a04e/cog_icon.png?content-type=image%2Fpng); } .accordion-item:nth-child(5) .accordion-item__click-target::before { background-image: url(https://images.squarespace-cdn.com/content/645c531759680b7476ca0cb4/68a415eb-3c10-4f45-a1e6-2ae6bcb68a76/finger2_icon.png?content-type=image%2Fpng); } Site is https://vanilla-snail-g56h.squarespace.com/ Password for the site is AirR0aster23

Thanks for your help @tuanphan. That worked!

I'm trying to use this code to make the card on the home page banner slideshow transparent and slightly frosted. I've pasted this code into the Custom CSS but no luck. It would be great if anyone could help. section[data-section-id="645cd23eee3c4a7933655414"] .list-item{ background: inherit!important; background-color: rgba(255, 255, 255, .3)!important; backdrop-filter: blur(5px)!important; } Site is https://vanilla-snail-g56h.squarespace.com/ Password for the site is AirR0aster23 Thanks in advance.

Thanks @tuanphan it's all fixed 😀

Hi @ChristopherBerman, I've added in your coding but I'm still getting icons appearing full width on mobile. Thanks, James

Hi @ChristopherBerman, It's changed on the desktop, but hadn't changed on mobile. Is there extra CSS needed to reflect the size change on mobile? Thanks, James

Site URL: https://www.dthmedia.com.au/ I have a sizing issue on mobile that I would like to try and fix. The image blocks on desktop look great but when these resize for mobile, they are far too large. Is there a way at keeping these at a particular pixel width/height for both desktop and mobile? See attached screenshots to see whats happening. The icons in question appear on the following pages: https://www.dthmedia.com.au/printing and https://www.dthmedia.com.au/design Cheers, James