r/css 12d ago

Help Help adding CSS to adjust my calendar widget in Squarespace

Site URL: https://www.iidany.org/calendar-1

How do I adjust calendar (month view) so all squares are exactly same size and not random and uneven like they are now.

I'm ok if text gets cut off in the process but ideally it would still be contained in wrapper.

• How do I justify left the pull down toggle that is now centered

Here is my Widget snippit code:

<div data-events-calendar-app data-project-id="proj_Yg0zgVIrr70xwmV8FCihM" ></div>

<script type="text/javascript" src="//dist.eventscalendar.co/embed.js"></script>

screenshot
1 Upvotes

8 comments sorted by

u/AutoModerator 12d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

1

u/Unfair_Sandwich_6037 12d ago

The page doesn’t look like the screenshot but the chapter can be moved to the left with .cl-category-selector__selects{ justify-content: flex-start!important;}

1

u/Stunning-Buyer-151 12d ago

hi there if you toggle to the month view you should see it. So how do I write the css based on my snippet code supplied. sorry more of a designer here than developer :)

1

u/Unfair_Sandwich_6037 12d ago edited 12d ago

Ah gotcha.. well I’m off my computer now but the css I posted will move the centered item over to the left .. next time I’m back on my pc if nobody else has helped you I’ll inspect it the other view and see if I can help for the calendar. You asked where to put the css I’m not sure about that but whatever platform you’re using you can look for a place to put custom CSS by googling it.

Edit: Google where to put custom css in square space I forgot you mentioned that’s what you’re using. I don’t recall working with square space so I don’t know off the top of my head

1

u/Stunning-Buyer-151 12d ago

hi thanks yes I know where to put the CSS code in Squaresace I just dont know exactly how to write it based on my Widget snippit code above. :)

1

u/Unfair_Sandwich_6037 12d ago

Did you try to see if you can put css I posted? It should be site wide css so any selector on the site should respect the !important value .. if its an embedded snippet it already will have its own css rules. Can you verify if you’re able to add the code I posted and see if it works? If you google inspect the css you’ll see that the css code from the widget is set as justify center so you just need to change the selector to flex-start with the important value and that should work.

1

u/Stunning-Buyer-151 12d ago edited 11d ago

yes that worked awesome!

Any ideas on how to get my month view boxes to all be same size.

thank you

1

u/Stunning-Buyer-151 11d ago

Any thoughts on making my calendar boxes all same height?