Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by DPruitt

  1. Hey Maeve! You can use CSS to adjust the accordion visually... Much like we would for the carousel. Either approach would work; both will require CSS to make it visually appealing.
  2. With the accordion, you can first create a text block for the first part of the visible text, then drop in the accordion block below it with "Read More" as a title, with the description containing the remaining text... If you're trying to do it within the carousel, you would need HTML within the description, Javascript for the "read more" button along with CSS to style it visually. I've written this for a few clients, however, you do have to add HTML to the content description which some people don't like doing. For example <h4>Read More...</h4> would be added to the description field.
  3. You can inject this into the pages index header or main header injection area: https://kwerling.squarespace.com/config/website/pages/website-tools/code-injection
  4. The first section is set to "large" more than likely. Try this instead which only fixed this specific page/item: @media screen and (max-width: 768px) { #item-64b52c9d20a12e01581b3309 .page-section:first-child {min-height: 30vh!important;} }
  5. 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;}
  6. 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;}
  7. Hey! For the testimonial section, you can have "read more" by using an accordion block for the drop down function of read more...
  8. Do you have specifics that you'd like to see?
  9. Try this which displays the original desktop navigation: .header-display-desktop { display: flex !important; } .header-display-mobile,.header-burger { display: none !important; } .header .header-title-nav-wrapper .header-title { flex: 0 100% !important; }
  10. If you can run javascript you can use this probably: <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <script> $('#grid') .before('<h3 class="kwportfolio">My portfolio site is under construction! In the meantime, please check out some of my past work below.<br>Need recent work samples now?<a href=mailto:karenlwerling@gmail.com>Please reach out to me directly.</a></h3>') </script>
  11. 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;}
  12. Looks like you also need to remove some CSS from your header injection as it's rendering on the page. Try this instead: .ProductList-filter-list-item-link,.ProductList-title,.sqs-announcement-bar-text p {font-family:'TypeType+-+TT+Commons+DemiBold.ttf' !important;}
  13. First remove Squarespaces' border, then try this instead: .header-display-desktop {border-bottom: 1px solid rgba(255,255,255,.5);} .header.shrink .header-display-desktop {border-bottom: 0px solid #ffffff;}
  14. 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} }
  15. You should be able to click "edit section" and choose "Lightbox" to have the images open when clicked. Feel free to share a link...
  16. 1. You can add the form to the product so that when they click Join Now, they get the form in a Lightbox: https://support.squarespace.com/hc/en-us/articles/205811218-Creating-a-custom-product-form 2. You can add the questions to the checkout page depending if you have other memberships or products: https://support.squarespace.com/hc/en-us/articles/206540907-Creating-a-custom-checkout-form
  17. ahh, sorry, this was for the classic section... If that's the case, you can go that route instead. Place each text block on top of it and then go back and write to hide/display the text block on hover for each element. You would need to stretch the text block all the way over the image block so that they are the same size. Honestly, it would probably be faster and a more long-term solution to use a classic section. You wouldn't have to look up block numbers.
  18. If you create the last section on the site and provide the link I can write you css for it...
  19. Since you're using image blocks, try: 1. Switching the image design to "Poster" and write your text over it. 2. Remove the poster image color overlay if you like using the Paintbrush tool, site styles - color - color template - image overlay. Secondly, make sure your Image Poster is set to "Center" in IMAGE BLOCKS. 3. Insert this into CSS which allows your to edit the overlay color and hide/reveal the title overlay: .sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .sqs-image-content::after, .sqs-block-image .image-block-outer-wrapper.image-block-v2:hover .image-overlay:hover{background-color: rgba(0,0,0,.5) !important; width: 100%;} .image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster .image-card>* {visibility:hidden} .image-block-poster-text-alignment-center .sqs-block-image .design-layout-poster:hover .image-card>* {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.