View Event Button on upcoming events

And here it is July 2022 and this is STILL not fixed! It makes no sense that the past events show the button and the current ones DON'T.

Is anyone able to tell me the code to remove the 'View Event' from the past events?

Also let me know where the code would go?

Thanks

5 hours ago, Sarah_L said:

Is anyone able to tell me the code to remove the 'View Event' from the past events?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Since Squarespace automatically adds a button for past events, I now have two 'view event' buttons. Does anyone have a suggestion for how to fix this?

On 3/15/2023 at 9:09 AM, aliciainspired said:

Since Squarespace automatically adds a button for past events, I now have two 'view event' buttons. Does anyone have a suggestion for how to fix this?

You could try this in your Custom CSS:

.eventlist .eventlist-button, // all sqs event buttons, including any future buttons
.eventlist--past .eventlist-button // just the past buttons
{
	display: none !important;
}

If that doesn't work, share the URL of the page in question so we can see what you're working with.

Thank you, that didn't seem to work though.

https://www.naturefirst.info/events

48 minutes ago, aliciainspired said:

Thank you, that didn't seem to work though.

https://www.naturefirst.info/events

Sorry, you'll need to add the !important declaration to overcome the specificity of pre-existing styles. I added it to the post above.

1 hour ago, kirkroberts said:

Sorry, you'll need to add the !important declaration to overcome the specificity of pre-existing styles. I added it to the post above.

Thank you, I added the code but unfortunately the two buttons are still there?

17 minutes ago, aliciainspired said:

Thank you, I added the code but unfortunately the two buttons are still there?

Where did you add the CSS? I don't see it in the page source. Try adding it to the Custom CSS area of your site.

16 hours ago, kirkroberts said:

Where did you add the CSS? I don't see it in the page source. Try adding it to the Custom CSS area of your site.

I added the CSS to the Custom CSS area but maybe I have done something wrong?

@aliciainspired I'm glad you included some of your Custom CSS. There needs to be a space between .eventlist and .eventlist-button, and also between .eventlist--past and .eventlist-button . Otherwise they are joined and each pair of classes would need to be present on the same tag for the style to work. The space means the .eventlist-button tag is inside the .eventlist or .eventlist--past tag.

6 minutes ago, kirkroberts said:

@aliciainspired I'm glad you included some of your Custom CSS. There needs to be a space between .eventlist and .eventlist-button, and also between .eventlist--past and .eventlist-button . Otherwise they are joined and each pair of classes would need to be present on the same tag for the style to work. The space means the .eventlist-button tag is inside the .eventlist or .eventlist--past tag.

Ok cool I added he spaces but unfortunately the extra buttons haven't disappeared.

@aliciainspired You have that declaration in a media query with max-width 700px:

17 minutes ago, kirkroberts said:

@aliciainspired You have that declaration in a media query with max-width 700px:

My coding knowledge isn't very much, what should I change?

@aliciainspired The CSS that you added to Custom CSS for the buttons is inside the braces for the @media query. In your screenshot there is a curly brace at line 37. If you move the button CSS below that curly brace that will probably do it. Think of it as the declarations are "nested" inside of each other. You want to un-nest the button CSS so it is not inside the @media curly braces.

Oh you legend thank you so much!

Any idea whats the easiest way to deal with all this? I want to make it as simple as possible for my client.

I dont want to have repeated buttons once the event is over/ have to manually go in to edit every time. Any solution to permanently get rid of 'view event' of past events? But also show details?

6 hours ago, em_ said:

Any solution to permanently get rid of 'view event' of past events?

You can remove this button from past events by adding this to the custom CSS panel:

.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none; 
}

12 hours ago, paul2009 said:

You can remove this button from past events by adding this to the custom CSS panel:

.eventlist-button.sqs-editable-button.sqs-button-element--primary {
  display: none; 
}

 

Life saver! Thanks @paul2009

Update July 2023: Squarespace appear to have resolved this issue as "View Event →" buttons are now appearing on Upcoming Events:

Did this help? Please give feedback by clicking an icon below  ⬇️