-
Posts
65 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by dvgdvgdvg
-
How to stack blocks in tablet view like mobile view
dvgdvgdvg replied to Illusterre's topic in Customize with code
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! -
Just change this part in the code: var dateformat = "mm-dd-yyyy"; To this: var dateformat = "yy-mm-dd";
- 35 replies
-
*Solved* How to change "Read More" text on blog excerpt
dvgdvgdvg replied to sararankin's topic in Customize with code
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! -
*Solved* How to change "Read More" text on blog excerpt
dvgdvgdvg replied to sararankin's topic in Customize with code
Please share your site URL (and password if applicable) -
*Solved* How to change "Read More" text on blog excerpt
dvgdvgdvg replied to sararankin's topic in Customize with code
Please share your site URL (and password if applicable) and we can take a look. -
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!
-
Font displays differently on different browsers
dvgdvgdvg replied to MMCAC's topic in Site Design & Styles
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. -
Social icon circles getting cropped on mobile (7.1)
dvgdvgdvg replied to dvgdvgdvg's topic in Customize with code
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: @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
-
Font displays differently on different browsers
dvgdvgdvg replied to MMCAC's topic in Site Design & Styles
@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 -
Style checkboxes in embedded MailChimp subscribe form
dvgdvgdvg replied to dvgdvgdvg's topic in Customize with code
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! -
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.
- 35 replies
-
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
- 35 replies
-
Style checkboxes in embedded MailChimp subscribe form
dvgdvgdvg replied to dvgdvgdvg's topic in Customize with code
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; } -
Style checkboxes in embedded MailChimp subscribe form
dvgdvgdvg replied to dvgdvgdvg's topic in Customize with code
Thanks so much! I'll test this out 🙂 -
Style checkboxes in embedded MailChimp subscribe form
dvgdvgdvg replied to dvgdvgdvg's topic in Customize with code
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
-
Change Logo Colour on Certain Pages
dvgdvgdvg replied to tiffybennett1's topic in Customize with code
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).- 3 replies
-
- custom-css
- logo
-
(and 2 more)
Tagged with:
-
Side-by-side Columns in Mobile Footer 7.1
dvgdvgdvg replied to alexandriam's topic in Customize with code
Woohoo! Glad we solved it. Feel free to mark the code that worked as the 'best answer' so your question is listed as solved. -
Side-by-side Columns in Mobile Footer 7.1
dvgdvgdvg replied to alexandriam's topic in Customize with code
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; } } } -
Side-by-side Columns in Mobile Footer 7.1
dvgdvgdvg replied to alexandriam's topic in Customize with code
Try this in your custom CSS: #block-yui_3_17_2_1_1604692235424_57878 { @media screen and (max-width: 767px) { width: 45%; float: left; } } -
*Solved* How to change "Read More" text on blog excerpt
dvgdvgdvg replied to sararankin's topic in Customize with code
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; }