Jump to content

dvgdvgdvg

Member
  • Posts

    65
  • Joined

  • Last visited

Everything posted by dvgdvgdvg

  1. Try updating the formatting of your "grid-area" settings as follows: grid-area: ~"1/2/12/26"; So the full code would be: @media screen (min-width:768px) and (max-width:999px) { .fe-block-ac891789c5e3492edea1 { grid-area: ~"1/2/12/26"; } .fe-block-yui_3_17_2_1_1668550060589_15027 { grid-area: ~"13/2/18/26"; } } Let us know if that works!
  2. Just change this part in the code: var dateformat = "mm-dd-yyyy"; To this: var dateformat = "yy-mm-dd";
  3. To make your "View More" links right-aligned and add the arrow back in, try the CSS below instead: a.summary-read-more-link { visibility: hidden; } a.summary-read-more-link:after { content: "View More →"; visibility: visible; } Hope that helps!
  4. Please share your site URL (and password if applicable)
  5. Please share your site URL (and password if applicable) and we can take a look.
  6. Glad you figured out the title. 🙂 The page being discussed in this forum post is not made with summary blocks though — it's a collection page, and the difference is key. On a page using summary blocks, you can build a sidebar like you would any other content: just group whatever blocks you'd like in their own column. But collection pages are more restrictive. To achieve the sidebar on my collection page (and on the blog post pages within the collection), I used this plugin from SQSP Themes. Good luck!
  7. All instances of Squarespace-provided fonts, which on my site includes all default H4 text and CTAs/buttons (font = Brandon Grotesque) as well as all body text (font = Artigo). They are defaulting to what looks like Times New Roman or similar. Screengrab of an example attached. The only font displaying correctly in Internet Explorer, according to Safari's Responsive Design Mode preview, is the custom one I've uploaded and added to my CSS with @font-face ("BrandonTextWeb-Bold") for my H1/H2/H3.
  8. 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?
  9. 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
  10. 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; } }
  11. 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: @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; } } Site password: governance
  12. @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
  13. 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!
  14. 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.
  15. 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
  16. 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; border-radius: 3px; box-sizing: border-box; } #mc_embed_signup .mc-field-group.input-group input[type=checkbox]:focus ~ label:before { border-color: #333; } #mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:before { background-color: #299fce; border: 1px solid #299fce; } #mc_embed_signup .mc-field-group.input-group input[type=checkbox]:focus:checked ~ label:before { border-color: #20305f!important; } #mc_embed_signup .mc-field-group.input-group input[type=checkbox]:checked ~ label:after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: block; } /* checkbox label */ #mc_embed_signup .mc-field-group.input-group input[type=checkbox] ~ label { background-color: #fff; position: relative; display: inline-block; text-indent: 18px; }
  17. 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.
  18. 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
  19. If you want the logo to be black on those pages, here's an easy tutorial from Christy Price for inverting the color without having to upload a new logo image (find the code for your template family). If you need it to be a color other than black, you'll need to upload an image and inject code to swap it out; check out this tutorial from Mary Philip or search the forum's existing posts (this has been answered lots of times so you're sure to find what you need).
  20. Woohoo! Glad we solved it. Feel free to mark the code that worked as the 'best answer' so your question is listed as solved.
  21. Hmmm. Okay one more idea to try: [data-section-id="5fa5a1a08d0ffc3f2d151b14"] { @media screen and (max-width: 767px) { .sqs-col-4 { float: left!important; width: 45%!important; } } }
  22. Try this in your custom CSS: #block-yui_3_17_2_1_1604692235424_57878 { @media screen and (max-width: 767px) { width: 45%; float: left; } }
  23. In case this helps anyone, here's how you can do this in a blog summary block on 7.1: a.summary-read-more-link { visibility: hidden; } a.summary-read-more-link:before { content: "New Link Text →"; visibility: visible; }
×
×
  • 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.