Jump to content

Expand 'List' item to fill width of screen

Recommended Posts

  • Replies 8
  • Views 285
  • Created
  • Last Reply

Top Posters In This Topic

4 hours ago, DreamrW said:

Site URL: https://alpaca-rose-3nt8.squarespace.com/packages

Is there a way to make the bottom list item 'Add Ons' fill the width of the screen? 

https://alpaca-rose-3nt8.squarespace.com/packages

Weddings2022

Screenshot 2022-05-30 at 12.46.13.png

You can try the following code

section[data-section-id="6288cac9b1d0531cd7c14e2e"] li:last-child {
  grid-column: 1/-1;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
6 hours ago, DreamrW said:

So this happened... 😞

Screenshot 2022-05-30 at 17.57.12.png

Have you added my code on your site? I check it does not exist currently.

BTW, here is my testing

image.thumb.png.534324e29a8a3765aae02bee78b00825.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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

I check that you add not exact my code

image.thumb.png.f5235d5630b50a1a0376e597dd47ef14.png

The right one is

section[data-section-id="6288cac9b1d0531cd7c14e2e"] li:last-child {
  grid-column: 1/-1;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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
  • 2 weeks later...
On 6/9/2022 at 6:41 AM, bangank36 said:

I check that you add not exact my code

image.thumb.png.f5235d5630b50a1a0376e597dd47ef14.png

The right one is

section[data-section-id="6288cac9b1d0531cd7c14e2e"] li:last-child {
  grid-column: 1/-1;
}

 

Still not working 😞 

Do I add that in custom css or page header? I've tried the former and it's still not aligning correctly...

 

Link to comment

Have you changed the site-wide password, it alerts wrong password at the moment.

Kindly try the following code instead of the old one

section[data-section-id="6288cac9b1d0531cd7c14e2e"] li:last-child {
  /*grid-column: 1/-1;*/
  grid-column-start: 1;
  grid-column-end: -1;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 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.