Making event list width smaller

Site URL: https://lavender-gopher-rk2b.squarespace.com

Hello,

I'm looking help for making the width smaller on the agenda page of my website. I don't like the two options of inset or full.

Since we are not interested in displaying excerpts, we don't want so much space for the event overview. I'd like to make the list much smaller, so people could scroll much faster and it would look more intentional. (attached is what i want, smaller.)

If possible, maybe would interesting to have then in a grid, too, but this is optional.

Thanks a bunch.

Anele

Hi. Can you share link to page in screenshot?

Hey, sorry for the late reply, I wasn't notified you didnt answer 🙂

The link to the agenda is this: https://lavender-gopher-rk2b.squarespace.com/agenda

On 4/9/2021 at 9:02 PM, Anele said:

Hey, sorry for the late reply, I wasn't notified you didnt answer 🙂

The link to the agenda is this: https://lavender-gopher-rk2b.squarespace.com/agenda

Hi. Add to Design > Custom CSS > Then save & reload your site

/* event list width */
@media screen and (min-width:768px) {
div.eventlist {
    width: 70%;
    margin: 0 auto;
}
}

On 4/9/2021 at 9:02 PM, Anele said:

Hey, sorry for the late reply, I wasn't notified you didnt answer 🙂

The link to the agenda is this: https://lavender-gopher-rk2b.squarespace.com/agenda

and some other problems, if you need to fix, just reply here

Site URL – https://lavender-gopher-rk2b.squarespace.com/

1. (Tablet-Footer) Text break, want to change text size, column width or change footer layout on tablet only?

2. (Tablet/Mobile) Want to add a back to top button?

3. (Mobile-Homepage) Want to align left this text?

4. (Mobile-Overlay) Add a space between line 1-2 in text?

5. (Tablet-Loos and Covid19) Buttons overlap

6. (Mobile-Loos and Covid19) Buttons side by side?

7. (Tablet-News) Want to change to 2 or 3 posts/row?

8. (Tablet-Blog post) Increase content width on tablet?

9. (Mobile-Partners) Change to 2 logos/row?

10. (Contact) Browser tab name still shows “Contact 1”

11. (Tablet-Artistic residencies) Increase width?

34 minutes ago, tuanphan said:

and some other problems, if you need to fix, just reply here

Site URL – https://lavender-gopher-rk2b.squarespace.com/

1. (Tablet-Footer) Text break, want to change text size, column width or change footer layout on tablet only?

2. (Tablet/Mobile) Want to add a back to top button?

3. (Mobile-Homepage) Want to align left this text?

4. (Mobile-Overlay) Add a space between line 1-2 in text?

5. (Tablet-Loos and Covid19) Buttons overlap

6. (Mobile-Loos and Covid19) Buttons side by side?

7. (Tablet-News) Want to change to 2 or 3 posts/row?

8. (Tablet-Blog post) Increase content width on tablet?

9. (Mobile-Partners) Change to 2 logos/row?

10. (Contact) Browser tab name still shows “Contact 1”

11. (Tablet-Artistic residencies) Increase width?

Hey tuanphan!

SUPER thanks on the event view, that's exactly how i needed it!

Thanks for this, it seems I need to work more on looking at mobile/tablet 🙂

To answer your options:

1. YES!

2. YES!

3. YES!

4. YES!

5.-6. It would be good to have a uniform way for the buttons. 2 per line would be good. Or maybe have them smaller? I have a few other pages where there are many buttons per page > https://www.loosdenhaag.com/ephemere-2017

7. Can I have 3 posts per row?

8. YES!

9. Is it possible to have 3 logos per line?

11. YES! 🙂

Thank you so much for this overview. I'm excited for your reply!

Anele

Hey tuanphan!

I have an extra question for the events page, so Im just going to write it here.

We would like to have many events show up on the calendar itself, however we do not want all of these individual events to show up in the list below (all events). Is there a way to do filter that out?

I know this is possible with to achieve in the 'lists' but this is about the 'all events' list.

Thanks in advance!

21 hours ago, Anele said:

Hey tuanphan!

SUPER thanks on the event view, that's exactly how i needed it!

Thanks for this, it seems I need to work more on looking at mobile/tablet 🙂

To answer your options:

1. YES!

2. YES!

3. YES!

4. YES!

5.-6. It would be good to have a uniform way for the buttons. 2 per line would be good. Or maybe have them smaller? I have a few other pages where there are many buttons per page > https://www.loosdenhaag.com/ephemere-2017

7. Can I have 3 posts per row?

8. YES!

9. Is it possible to have 3 logos per line?

11. YES! 🙂

 

Thank you so much for this overview. I'm excited for your reply!

 

Anele

Q1. Add to Design > Custom CSS

/* Footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-yui_3_17_2_1_1599073762410_83257+.row>.span-2:nth-child(2) {
    width: 5%;
}
div#block-yui_3_17_2_1_1599073762410_83257+.row>.span-2:nth-child(3) {
    width: 30%;
}
div#block-yui_3_17_2_1_1599073762410_83257+.row>.span-1:nth-child(4) {
    width: 3%;
}
}

Q2. Follow this guide.

Q3. Q4. Add to Design > Custom CSS

/* Mobile homepage success den haag */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1600455211161_18309 * {
    text-align: left !important;
}
div#block-yui_3_17_2_1_1600455211161_35956 div {
    text-align: left !important;
}
/* mobile nav spacing */
.header-menu-nav-item a {
    line-height: 26px;
}
}

Q5-11. Next comment

Hey Tuan!

This was great, thanks a bunch! 🙂 You're a legend!

Do you maybe have the rest of the adjustments?

Anele

On 5/3/2021 at 7:23 PM, Anele said:

Hey Tuan!

 

This was great, thanks a bunch! 🙂 You're a legend!

 

Do you maybe have the rest of the adjustments?

 

Anele

Q5, 6, 7. Add to Design > Custom CSS

/* Buttons overlay tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-5f61df9920943077f47a6330+.row .col {
    width: 33.333%;
    float: left !important;
}
div#block-5f61df9920943077f47a6330+.row>.span-2:nth-child(4) {
    margin-left: 15% !important;
}
/* blog layout */
.blog-basic-grid.collection-content-wrapper {
    grid-template-columns: repeat(3,1fr);
}
}
/* buttons side by side */
@media screen and (max-width:767px) {
div#block-5f61df9920943077f47a6330 + .row .col {
    width: 50% !important;
    float: left !important;
}
div#block-5f61df9920943077f47a6330 + .row .col:nth-child(2n+1) {
    clear: left !important;
}
}