Jump to content

Making Accordion block full-width

Recommended Posts

25 minutes ago, AnnaC said:

Site URL: https://studiogently.com/branding-photography

Hey all,

Would love to know if anyone has managed to make the Accordion block full-width, rather than 70% as it is now? It's not so great on smaller screens in particular and just seems like a bit of a waste of space 🙂

Hi @AnnaC,

You can try the following code in Home > Design > Custom Css

.sqs-block-accordion .accordion-item__description {
  max-width: unset !important;
  width: 100%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing result

image.thumb.png.22b4e2065e198003ed0572098fb2658a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

This has worked amazingly, thank you so much @bangank36, you are a star

On 11/17/2021 at 2:20 PM, bangank36 said:

Hi @AnnaC,

You can try the following code in Home > Design > Custom Css

.sqs-block-accordion .accordion-item__description {
  max-width: unset !important;
  width: 100%;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

 

Link to comment

It 's good to know that 🙂

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.