Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

dvgdvgdvg

Member
  • Content Count

    61
  • Joined

  • Last visited

Reputation Activity

  1. Like
    dvgdvgdvg got a reaction from breathedotdesign in Basic grid blog - switching from 3 to 2 columns at medium screen widths breaks layout (7.1)   
    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!
  2. Like
    dvgdvgdvg got a reaction from bangank36 in Social icon circles getting cropped on mobile (7.1)   
    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

  3. Like
    dvgdvgdvg got a reaction from bangank36 in Basic grid blog - switching from 3 to 2 columns at medium screen widths breaks layout (7.1)   
    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

  4. Like
    dvgdvgdvg got a reaction from bangank36 in Blog collection page - move metadata to bottom + reformat date (7.1)   
    Works perfectly now! Thanks so much!
  5. Thanks
  6. Like
    dvgdvgdvg got a reaction from tuanphan in Style checkboxes in embedded MailChimp subscribe form   
    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!
  7. Like
    dvgdvgdvg got a reaction from bangank36 in Error message using calc function (px - vw) to set responsive section height   
    You're a lifesaver! I thought I was going to have to set like 30 media queries per page haha. Thank you!!
  8. Thanks
    dvgdvgdvg reacted to bangank36 in Error message using calc function (px - vw) to set responsive section height   
    Custom css use less so you can try this syntax
    width: ~"calc(900px - 20vw)" !important;
    more info: CSS3 calc() in LESS CSS (Example) (coderwall.com)

  9. Like
    dvgdvgdvg got a reaction from bangank36 in Error message using calc function (px - vw) to set responsive section height   
    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: calc(900px - 20vw)!important; } } This works for me when I test it in Inspector, but once it's live, I get this error message from Squarespace when inspecting the live CSS, which states that px + vw are incompatible units:
    /* WARNING raised evaluating next rule: ExecuteError INCOMPATIBLE_UNITS: No conversion is possible from PX (pixels) to VW (viewport's width).. stripping unit. */ As a result of this, my calc function is being stripped and made static. I've seen plenty of instances of these units being combined though, so I know it's possible. Am I doing something wrong? Anyone have a workaround?
    (Site password: governance)

  10. Like
    dvgdvgdvg got a reaction from bangank36 in Blog collection page - move metadata to bottom + reformat date (7.1)   
    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

  11. Like
    dvgdvgdvg got a reaction from bangank36 in Style checkboxes in embedded MailChimp subscribe form   
    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; }  
  12. Like
    dvgdvgdvg got a reaction from bangank36 in Style checkboxes in embedded MailChimp subscribe form   
    Thanks so much! I'll test this out 🙂
  13. Thanks
    dvgdvgdvg reacted to bangank36 in Style checkboxes in embedded MailChimp subscribe form   
    I just updated the code to hide it using absolute positioning, you can take reference of how to hide checkbox in this article, within the scope of these questions I can not go in detail. Hope that helps
    Inclusively Hiding & Styling Checkboxes and Radio Buttons (sarasoueidan.com)
  14. Like
    dvgdvgdvg got a reaction from bangank36 in Style checkboxes in embedded MailChimp subscribe form   
    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
  15. Like
    dvgdvgdvg got a reaction from tuanphan in Replace "NEXT" in list-pagination   
    Add this to your custom CSS:
    .list-pagination-prev div:nth-of-type(2) { display: none; } a.list-pagination-prev:after { content: "Föregående"; line-height:1.1em; } .list-pagination-next div:nth-of-type(1) { display: none; } a.list-pagination-next:before { content: "Följande"; line-height:1.1em; } I used Google Translate to guess at the right "previous"/"next" translations, so if they aren't the right word just change the text inside the quotation marks. 🙂 
  16. Thanks
    dvgdvgdvg got a reaction from BlackRidersDesign in Is there a way to custom format the comment block at the bottom of blog posts in 7.1?   
    Add to Home > Design > Custom CSS:
    h3.comment-count { font-size: calc(.7 * 1.2vw + 1rem); } h3.comment-count span { visibility: hidden; } h3.comment-count span:before { visibility: visible; content: "Marginalia"; } This will change the word and the font size. (Just a heads up, replacing the word "Comments" also removes the comment count # in parentheses after it.) I've applied the same font sizing as the previous/next post links on your blog for consistency, but you can change "calc(.7 * 1.2vw + 1rem)" to whatever font size setting you'd like.
    (Credit for the code to change the word "Comments" goes to @tuanphan in this forum post)
  17. Like
    dvgdvgdvg got a reaction from tuanphan in Remove spacer block on smaller screen size   
    I think you just need to change ".space-block" to ".spacer-block" with an r. 
  18. Like
    dvgdvgdvg got a reaction from Alow in Replace "NEXT" in list-pagination   
    Add this to your custom CSS:
    .list-pagination-prev div:nth-of-type(2) { display: none; } a.list-pagination-prev:after { content: "Föregående"; line-height:1.1em; } .list-pagination-next div:nth-of-type(1) { display: none; } a.list-pagination-next:before { content: "Följande"; line-height:1.1em; } I used Google Translate to guess at the right "previous"/"next" translations, so if they aren't the right word just change the text inside the quotation marks. 🙂 
  19. Like
    dvgdvgdvg got a reaction from tuanphan in Is there a way to custom format the comment block at the bottom of blog posts in 7.1?   
    Add to Home > Design > Custom CSS:
    h3.comment-count { font-size: calc(.7 * 1.2vw + 1rem); } h3.comment-count span { visibility: hidden; } h3.comment-count span:before { visibility: visible; content: "Marginalia"; } This will change the word and the font size. (Just a heads up, replacing the word "Comments" also removes the comment count # in parentheses after it.) I've applied the same font sizing as the previous/next post links on your blog for consistency, but you can change "calc(.7 * 1.2vw + 1rem)" to whatever font size setting you'd like.
    (Credit for the code to change the word "Comments" goes to @tuanphan in this forum post)
  20. Like
    dvgdvgdvg got a reaction from cnankivel in How to change the word "Search" in my searchbar?   
    Re: your main question of how to change the color of the placeholder "Search" text, try this in your custom CSS (it requires multiple settings for different browsers):
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ffffff; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #ffffff; } Source: https://www.w3schools.com/howto/howto_css_placeholder.asp
  21. Like
    dvgdvgdvg reacted to scholarsayze in How can I create more white space around my Banner inset?   
    AWESOME!!! Thank you SO much that's pretty cool!! Now I can use this styling across my site at specific banners! Just what I needed, thank you again!! 💯
    "Teach me code please!" haha! 
  22. Love
    dvgdvgdvg got a reaction from scholarsayze in How can I create more white space around my Banner inset?   
    Yep! You can target the section ID in the CSS. You can find the ID by inspecting the code, but it's way easier to use the Squarespace ID Finder Chrome extension. Here's the CSS for the particular example you asked about, with increased left/right margins on just the 2nd inset section ("Collection"):
    [data-section-id="6024f8054a859919444821aa"] { .section-background { top: 3vw!important; right: 9vw!important; bottom: 3vw!important; left: 9vw!important; } }  
  23. Like
    dvgdvgdvg got a reaction from bangank36 in How to view/filter ALL blog tags?   
    The bottom of the Tag Cloud settings pop-up has a slider that allows you to display up to 100 tags or categories – screengrab attached. I imagine their thinking is that no one is going to sit there and read through hundreds of tags in an unfiltered list to find a topic (that's what search is for, right?). If you need to avoid plug-ins as you said, I'd recommend ordering your tag cloud to have the most frequently used up top, and integrating a search bar to bridge the gap. Maybe someone out there can suggest a coding solution to override the 100-item limit though? Good luck!

Ă—
Ă—
  • Create New...