Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Community Answers

  1. DPruitt's post in Header Button Arrangement was marked as the answer   
    You could do this:
    .header-menu-nav-folder-content {justify-content: initial !important;} .header-menu-nav-folder.header-menu-nav-folder--active { flex-direction: column-reverse !important; } Sadly, it does move the Social Icons above the navigation.
    You could do this approach instead to solve that issue:
    .header--menu-open .header-menu .header-menu-cta {order: 0;} .header-menu-nav-folder-content {order: 5 !important;} .header--menu-open .header-menu .header-menu-actions { order: 6 !important;}  
  2. DPruitt's post in Invert logo on product and store pages was marked as the answer   
    This inserting this into the page header injection area of the shop page instead:
    <style> .header-title-logo img {filter: brightness(0) invert(0);} </style> If you want to invert the logo on the Cart Page you will add this to the Custom CSS Panel:
    #cart .header-title-logo img {filter: brightness(0) invert(0);} For the checkout page where users insert their CC# information, you'll have to render the original logo or use text as your logo as we can't use any coding for the secure checkout page.
  3. DPruitt's post in Styling of basic blog grid was marked as the answer   
    Try this:
    Blog Title:
    .blog-title { font-family: Helvetica Neue !important; font-size: 2rem !important; text-transform: none !important; font-weight: 500 !important; letter-spacing: 0rem !important; margin-bottom: 0.8em; margin-top: 0.8em !important; padding-bottom: 0.5rem !important; padding-top: 0.5rem !important;}  
    Blog Excerpt:
    .blog-excerpt p {font-size: 1rem !important;} .blog-excerpt {padding-bottom: 0.8rem !important;}  
    Read More Link:
    .blog-more-link { font-family: 'aktiv-grotesk-extended' !important; font-weight: 500 !important; font-size: 1rem !important; font-style: normal !important; text-transform: uppercase !important;}  
  4. DPruitt's post in Change the header size on my Newsletter was marked as the answer   
    You should be able to do this under "Fonts".
    You can also code it with custom CSS like this:
    .newsletter-form .newsletter-form-header-title {font-size: 25px !important;}  
  5. DPruitt's post in Change Section Height for Mobile Only was marked as the answer   
    Try this:
    @media screen and (max-width: 540px) { #sections .page-section:first-child {min-height: 20px!important;} } If you need to also reduce the padding to the section:
    @media screen and (max-width: 540px) { #sections .page-section:first-child .content-wrapper {padding:0px !important} }  
  6. DPruitt's post in Header and Portfolio Grid not aligning to body/footer at certain widths. was marked as the answer   
    Feel free to mark as solution.  Code can be found around line 194:
    /* align portfolio pagination */ .item-pagination[data-collection-type^="portfolio"] { max-width: 1656px; margin: 0 auto; } @media screen and (min-width: 1656px) { #collection-64da37315a0bb7306fe44e53,#collection-64d0eb024c0ac125cd63e3b8,#collection-64d20affa6742348f6ae01bd {#sections .content {padding-left: 8vw; padding-right: 8vw;} .tweak-portfolio-grid-basic-width-inset .portfolio-grid-basic {padding-left:0px!important; padding-right:0px !important} } }  
  7. DPruitt's post in custom css for product item block was marked as the answer   
    This inserting this into CUSTOM CSS:
    .ProductItem-additional .product-title {font-size: 25px !important; text-decoration:underline} .ProductItem-additional .product-price {font-size: 18px !important;} .ProductItem-additional .product-excerpt p {font-size: 18px !important;} .ProductItem-additional .sqs-add-to-cart-button {color:#ffffff !important; background-color:#000000 !important; border-radius:0px !important;} .ProductItem-additional .product-block .product-quantity-input input {padding-left: 3px !important; padding-right: 3px !important; padding-top: 3px !important; padding-bottom: 3px !important;}  
  8. DPruitt's post in Paywall is not showing log-in button was marked as the answer   
    Thank you!

    If you can access that page or create a new one with a membership sign-in, I think if you add a spacer bar above your paywall login block and below it, it may fix the issue (as a first attempt).  It's showing as an empty index in the markup so I think that's throwing it off...  Could be that it's SS 7.0 and not SS 7.1.

    Also, you should also take note that the login button disappears after you're logged in...

    You can probably display it regardless with this css:
    .sign-in-button {display:block !important;}  
    This will adjust the background color and give a bit of padding to the existing setup:
    .Index--empty {background-color:#ffffff !important; padding-top: 25px !important; padding-bottom: 25px !important;}  
  9. DPruitt's post in CSS: Struggling to Align Image and Code Blocks Seamlessly was marked as the answer   
    Oh okay, that's not how the old site is operating...  See how it's constrained?  It has a max width of only 1250px regardless of the screensize, it will never go beyond 1250px.

    Here, just add the margin "auto" to fix the alignment...
    #item-64dd2003f0a4be3998c1f3d1 { padding: 4em; width: 1250px; margin: auto; }  
  10. DPruitt's post in Gradient Overlay Between Sections was marked as the answer   
    Hey Mike!
    Try this:
    #collection-id #sections .page-section:nth-child(1):after {content:''; width: 100%; display:block; position: absolute; bottom:0px; height: 70px; background: #1c1c1c; background: linear-gradient(0deg, #1c1c1c 28%, rgba(28, 28, 28, 0) 100%); } You can always toggle the height if it needs to be larger...  You'll also need to toggle the #collection-id to get the code to work specifically on your homepage so that other pages are not affected...  If you want it on all pages, simply remove #collection-id.
  11. DPruitt's post in Event Page Buttons was marked as the answer   
    Try adding this to the bottom of your custom css or alter any existing custom css:
    .eventlist a.eventlist-button {border-width: 2px !important; border-style: solid !important; transition: 0.1s background-color linear, 0.1s color linear; font-family: brandon-grotesque !important; font-weight: 700 !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: .3em !important; background-color: transparent !important; color: #272727 !important; width: auto !important; height: auto !important; padding: 1em 2.5em !important;} .eventlist a.eventlist-button:hover {background-color: #272727 !important; color:#ffffff !important}  
  12. DPruitt's post in Active Page Footer Links was marked as the answer   
    I think your quickest approach will be to assign a bold link per collection.  Try inserting this into CUSTOM CSS:
    /*Homepage*/ #collection-649d74abb21c116f17a9fc23 #block-yui_3_17_2_1_1688402606420_25603 a:first-child{font-weight: 900 !important;} /*About*/ #collection-64a2a952762de64617a90212 #block-yui_3_17_2_1_1688402606420_25603 a:nth-child(2){font-weight: 900 !important;} /*Services*/ #collection-64a2a95e48f12318878a5706 #block-yui_3_17_2_1_1688402606420_25603 a:nth-child(3){font-weight: 900 !important;} /*Contact*/ #collection-64a2a967b299003f9fbecef8 #block-yui_3_17_2_1_1688402606420_25603 a:last-child{font-weight: 900 !important;}  
  13. DPruitt's post in Gallery Block Glitch on my Home Page was marked as the answer   
    I just reviewed the Markup to the site and could see how hitting back on the browser could cause certain elements to display; it's all written into the same index.

    I think your best bet is just to give your projects a background so that it covers anything displaying behind it.  Try inserting this into DESIGN - CUSTOM CSS:
    .project {background-color:#000000 !important;}  
  14. DPruitt's post in Hover over colour for Pagination <PREV NEXT> was marked as the answer   
    Try this instead:
    .item-pagination-link:hover .item-pagination-prev-next, .item-pagination-link:hover .item-pagination-icon svg { color: #42c6ff !important; stroke: #42c6ff !important; }  
  15. DPruitt's post in How to change spacing between social links in the footer section ? was marked as the answer   
    This should work if you're using Squarespace 7.1.  Sorta hard not having a link to your website; insert into CUSTOM CSS:
    #footer-sections .sqs-svg-icon--wrapper { margin-left: 30px !important; margin-right: 30px !important; }  
  16. DPruitt's post in Cart inconsistent showing amount? was marked as the answer   
    Here you go, enter this into CUSTOM CSS:
    .sqs-cart-quantity { color: #000000 !important; }  
  17. DPruitt's post in Trying to insert text underneath the logo using pseudo element was marked as the answer   
    Here you go:
    .header-title-logo a:after { content: 'Subtitle Text'; font-size: 18px; color: #000000; text-align: center; display: block; }  
  18. DPruitt's post in Force gallery grid layout on mobile to 4 items per row was marked as the answer   
    This might work; you might adjust the width of the code so that it looks good and fills the container without overflowing to another line:
    @media screen and (max-width: 767px) .sqs-layout .sqs-gallery-design-grid-slide { width: 25% !important; clear: none !important; }  
  19. DPruitt's post in Custom Font was marked as the answer   
    FYI, you can still add the fonts here:
  20. DPruitt's post in How do I hide "all" as an option for product categories? was marked as the answer   
    If possible, always list your URL so that your site can be checked.

    .ProductList-filter-list-item--all {display:none!important}  
  21. DPruitt's post in Change the image size in the shopping cart was marked as the answer   
    Can you provide the link to your site?

    This might work if you remove your previous code to alter the margins and such:
    .css-b3eyut { font-size: 55px !important; line-height: 1.1em !important;}  
    For the button in the top right of your site, this might work:
    #siteWrapper .header-actions-action--cta .sqs-button-element--primary {font-size: 17px!important;}
    If those 2 don't work, I'll need to see the link to give you the correct classes for the fix.
  22. DPruitt's post in Hamburger menu color change upon hover - seeking CSS was marked as the answer   
    This should work for you:
    .burger-inner:hover .top-bun, .burger-inner:hover .patty, .burger-inner:hover .bottom-bun {background-color:red !important;}  
  • 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.