Creating Two Columns in Accordion

Hi, I used your code below to create two columns (which is great) - but is there an edit you could make so the two columns only apply to the second item in the accordion and not the first??

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

3 hours ago, THESC said:

Hi, I used your code below to create two columns (which is great) - but is there an edit you could make so the two columns only apply to the second item in the accordion and not the first??

@media screen and (min-width: 768px) {
    .accordion-item__description {
        columns:2;
        column-gap: 20px
    }
}

.accordion-item__description {
    max-width: unset !important;
    padding: 10px !important
}

li:nth-child(1) .accordion-item__description:after {
    content: "";
    display: block;
    width: 100%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.pnghttps://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4e5c136b3883d66713077/1640293825396/coaching_testimonial_1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

li:nth-child(2) .accordion-item__description:after {
    content: "";
    display: block;
    width: 40%;
    height: 160px;
    background-image: url(https://static1.squarespace.com/static/61b500bd53c4830dec672bb1/t/61c4d87c26c08f5e4b1fa4e4/1640290428962/diamond_outline_2.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 20px
}

Can you share your site with the protected password so I can take a look?

Not quite sure how I would go about sharing but have attached some screen shots. I'd like to the 1st paragraph of the accordion, below 'Description' to be one column of text with the second part of the accordion, 'Amenities', to remain as two columns....Hope that helps!! 

1 hour ago, THESC said:

Not quite sure how I would go about sharing but have attached some screen shots.

If you share the URL in your browser and set up a site wide password and share that here, we can look at the site to help, follow this guide:

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

The site is live so I don't want to put a password on it, if it can't be done then not to worry, I will be able to live with it! Thanks

On 11/29/2022 at 2:29 AM, THESC said:

The site is live so I don't want to put a password on it, if it can't be done then not to worry, I will be able to live with it! Thanks

I don't see your site url. Can you share it? We can check problem easier

https://www.thepureexperience.gr/villa-ivy-copy-copy

password; squarespace

On 12/3/2022 at 2:33 AM, THESC said:

https://www.thepureexperience.gr/villa-ivy-copy-copy

password; squarespace

 

The page url doesn't exist. Have you enabled page yet?

Hi, I've actually decided not to continue with that idea however, there is something else you can hopefully help with?! I have a grid of images that I would like to have the images zoom on hover (with no overlay). I tried another piece of code but I wasn't able to use the images as a link with that code in place....Any ideas? Also, I'd like the code to just apply to the grid block and not the other images at the top of the page....

https://www.thepureexperience.gr/porto-heli

Thanks! 

You can try this Custom CSS: 

#collection-638332fe269e9c76e6791f3a {
  .sqs-block-image img {
    transform:scale(1);
    transition:ease-in-out 300ms;
    -webkit-transition:ease-in-out 300ms;
  }
  .sqs-block-image:hover img {
    transform:scale(1.5);
  }
}

Give me a thumbs up if that works for you!

Unfortunately no joy! 

On 12/7/2022 at 9:32 PM, Ziggy said:

You can try this Custom CSS: 

#collection-638332fe269e9c76e6791f3a {
  .sqs-block-image img {
    transform:scale(1);
    transition:ease-in-out 300ms;
    -webkit-transition:ease-in-out 300ms;
  }
  .sqs-block-image:hover img {
    transform:scale(1.5);
  }
}

Give me a thumbs up if that works for you!

The link tag cover image, so image-block hover won't work.

On 12/8/2022 at 1:19 AM, THESC said:

Unfortunately no joy! 

Add to Design > Custom CSS

div#page-638332fe269e9c76e6791f3a a:hover img {
    transform: scale(1.3) !important;
}

Thanks! This works when I apply it to the individual image ID but ideally I would like to apply it to the whole block so it applies to all of the images, as there are a lot of individual images! Any ideas?

On 12/10/2022 at 11:11 PM, THESC said:

Thanks! This works when I apply it to the individual image ID but ideally I would like to apply it to the whole block so it applies to all of the images, as there are a lot of individual images! Any ideas?

The ID in my code is ID of section, not ID of individual images

so It should work for all Images

Can you check it again?