dvgdvgdvg

Yes, those are the ones. Are you looking on mobile or just on a narrow window on desktop? For me, they're getting cut off on mobile on both Safari and Chrome, as shown in my original post. (They look fine on narrow desktop windows though.) Any idea how to fix @bangank36?

Site URL: https://cyan-teal-3zmw.squarespace.com/ The circular social icons in the footer on my site are getting cropped on mobile. Screengrab below. Does anyone know a CSS fix to prevent the edges of the circles from being cut off? Site password: governance

I actually just finally found the cause! It was the pagination links that were breaking the layout. I changed the "grid-column-end" setting on the pagination (from 4 to 3) and now it works perfectly. Here's the CSS in case it's helpful for anyone else: @media screen and (min-width:768px) and (max-width: 1024px) { .blog-basic-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-column-gap: 40px !important; } .blog-basic-grid .blog-list-pagination { grid-column-end: 3 !important; } }

Site URL: https://cyan-teal-3zmw.squarespace.com/blog I'm working on making my basic grid blog switch from 3 columns to 2 columns at medium screen widths so the columns aren't absurdly narrow. I've applied the CSS that's been shared frequently in this forum, but the weirdest thing is happening — it totally breaks the layout, but ONLY on the main blog landing page. It works just fine if you navigate to a filtered view by category or tag, (e.g. https://cyan-teal-3zmw.squarespace.com/blog/category/In+The+News). Any help would be hugely appreciated! Here's the CSS I'm using for the column switch

Works perfectly now! Thanks so much!

@tuanphan Just found this thread and I’m having a similar issue: none of my Squarespace fonts are displaying on Internet Explorer, only my custom fonts. Do you have a fix?? Site URL: https://cyan-teal-3zmw.squarespace.com/ Password: governance

Ah thank you for the heads up! It looks like the footer form was causing this; I removed the "width:auto" setting I'd applied to .newsletter-form-fields-wrapper and that appears to have resolved it. Let me know if the overflow/white edge is still showing up for you though. Appreciate it!

You're a lifesaver! I thought I was going to have to set like 30 media queries per page haha. Thank you!!

The CSS to move the metadata to the bottom worked perfectly, thank you so much! 🙏 The script to change the date isn't working though, for some reason.

Site URL: https://cyan-teal-3zmw.squarespace.com/blog-posts I'm looking to achieve a couple of things on my blog collection page: 1) Move the metadata to below the other post content. (This is easily doable on summary pages via the "Design" panel but doesn't appear to be an option on collection pages.) 2) Change the date format from MM/DD/YY to Mon Day, Year. Any help would be hugely appreciated! Site password: governance

You're my hero @bangank36 – with some tweaks, this worked exactly as I hoped! I made some modifications and added focus states for accessibility. In case it's helpful for anyone else, here's the revised CSS: /* hide existing checkbox */ #mc_embed_signup .mc-field-group.input-group input[type=checkbox] { position: absolute; opacity: 0; } /* new checkbox styling */ #mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label:before { content: ''; position: absolute; top: 0; left: 0; height: 20px; width: 20px; background-color: #fff; border: 1px solid #ABB0B2;

Thanks so much! I'll test this out 🙂

Site URL: https://cyan-teal-3zmw.squarespace.com/case-study-equality-indicators I'm working on a page with overlapping sections – one is inset with text, and one is full-width behind it as a background color – and I'm trying to get the background section height to expand as the text section on top of it expands. (Screengrab attached.) To achieve this, I'm using the calc function to make the height increase as the screen width decreases. Here's an example: [data-section-id="6027ff54b347b32cf0c31df8"] { @media screen and (min-width: 1125px) and (max-width: 1400px) { min-height: c

Thanks! This looks great in theory, but unfortunately I believe using "display:none" to hide the default input makes the form inaccessible for screen reader users; if that's the case, then this approach should be avoided.

Site URL: https://cyan-teal-3zmw.squarespace.com/subscribe I'm looking to style the checkboxes in an embedded MailChimp subscribe form – specifically, I'm trying to change the background color when they're checked. I've tried using "input[type=checkbox]:checked" to target them in my CSS but I'm not having any luck. Any help would be hugely appreciated. Password = governance