Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

David_Ledger's Achievements

  1. @tuanphan Love this code. I am using it with the p.gallery-caption-content { color: black; font-size: 2rem !important; } swapped from 'black' to 'white'. Based on this code is there a way to add a darken feature to the image on hover so the white text stands out a bit more? Thank you in advance.
  2. Site URL: https://www.findyourfunds.org/apply-for-funds Looking to add a second button to one of my list items in my Simple List. Currently looks like this: I would like the right side entry to look like this, (and then be able to go in and change the link and description on the button): Any thoughts?
  3. Top of Home page, 3rd slide in slideshow. Am currently using this code with a little better success, but would love whatever the better code would be to use.: @media only screen and (min-width: 1500px) and (max-width: 5000px){.gallery-fullscreen-slideshow {height: 46vh!important; }}
  4. Site URL: https://www.shahfoundation.org/ Below my header on the home page, I have placed a Gallery Section with the gallery option type of Slideshow: Full. I have used images sized @2500px W x 600px H with a concentrated center image area of approx. 800px x 600 px for valuable information which I would like to appear on all screen sizes especially when going down to mobile view. This formula seems to work well without additional CSS, however at a certain larger screen size of 3000px on 30in monitor and full screen width on 15" laptop, the images begin to stretch beyond their full size, clipping the top and bottom of the image. I previously have been using: .gallery-fullscreen-slideshow{ height: 46vh!important; } to adjust for the clipping of the image for the specific clipping I have seen, but is there better code to keep the slideshow from clipping at these larger screen sizes with a better responsive solution? Thanks in advance.
  5. Site URL: https://thefutur.com/brand-strategy-fundamentals#scroll-text1 Wondering if anyone knows how to pick this apart and create something similar in Squarespace. What is needed? Javascript, CSS, HTML Combination? Not even sure where to start, any thoughts would be helpful to get me started. I believe they built this in Webflow.1 Thank you, https://thefutur.com/brand-strategy-fundamentals#scroll-text1
  6. I am working in the business plan model. Thank you in advance, I couldn't wrap my head around how to change the order.
  7. Site URL: https://mushroom-sapphire-grdc.squarespace.com/ I am using a Side by Side summary block for a blog. I would like to reorder how items show up on the summary: I would like it to appear as follows: 1. Date (Primary Metadata) & Blog Excerpt on one line 2. Title of Blog Entry 3. Read More Currently the closest I can get to with default settings is: 1. Date 2. Title of Blog Entry 3. Blog Excerpt 4. Read More Any help would be appreciated, Thank you!
  8. I appreciate you reaching out. I originally put everything in the Design>Custom CSS area. I was hoping to tidy up the site by moving CSS that only effected single pages pages over to the Code Injection areas. No worries, it still works in the Custom CSS area. Thank you!
  9. I did that and it did not work. I put this into the Into the Blog Page>Advanced>Page Header Code Injection: <style>#block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}}</style>
  10. Thanks Derrick, That is the plug-in I used to id the block. Like I said previously, it works when added to Design>Custom CSS, but I am not sure how to write it if I just wanted to add it to the Page Header Code Injection area of my blog page instead of the Design>Custom CSS area.
  11. Site URL: https://mushroom-sapphire-grdc.squarespace.com/ (This code will allow a little outer glow around a specific image:) If I put it in Design>Custom CSS, and it works, but I am trying to put page specific code on their respective pages to try to organize a bit better: #block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}} How do I translate this code to a single blog page where I am either suppose to inject it into either the "Page Header Code Injection” area or the "Post Blog Item Code Injection” I thought it would be this but it is not working: <style> #block-yui_3_17_2_1_1596655451516_4134 {.image-overlay {box-shadow: 0px 0px 10px 4px (#fff);}} </style> Any thoughts? Thanks in advance,
  • 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.