-
Posts
54 -
Joined
-
Last visited
Reputation Activity
-
juliaprather reacted to tuanphan in How to change Header Background Color only on Blog Posts?
To set headaer solid color on blog posts only, add this to Design > Custom CSS
body[class*="collection-type-blog"].view-item header#header { background-image: linear-gradient(#0e68ed,rgba(14,104,237,0)) !important; }
-
juliaprather got a reaction from paul2009 in Focal Point Snap-To-Center
Just pled my case with customer care. Be gone, snap-to-center!
-
juliaprather got a reaction from Kimmunic8 in How do you add Image Alt Text to Section Backgrounds?
Making another request that background images be given the option for alt text.
As @tcp13 mentioned, there may be a null alt tag assigned to background images which makes them technically compliant, but they still get caught by accessibility scanners.
Clients in industries which tend to be concerned with compliance do not understand this.
-
juliaprather reacted to tuanphan in Reduce width of CTA button on mobile
Add to Design > Custom CSS
/* Mobile button */ a.theme-btn--primary.btn.sqs-button-element--primary { padding-left: 10px !important; padding-right: 10px !important; min-width: unset !important; }
-
juliaprather got a reaction from Ziggy in announcement bar padding on mobile
Well how do you like that?? Worked like a charm. Thank you, Ziggy!
-
juliaprather reacted to Ziggy in announcement bar padding on mobile
Try this Cusotm CSS:
@media only screen and (max-width:767px) { .sqs-announcement-bar-text { padding: 0.8em 1em; } } Let me know if that works for you!
-
juliaprather reacted to JessicaOddi in Accessibility Issues
There are far too many basic accessibility issues with Squarespace, that need to be corrected with injecting custom code. Their new "integrations" for auto-focus and skip to content, is far from enough. After building a site for a client, here are some basic things I've had to implement to make it SEMI W.C.A.G. 2.1 compliant [and who are we kidding, compliance is the bare minimum for accessibility]:
Links & Hover States: CSS for hover states on interactive elements. Inline and button links edited for padding and legibility.
Header & Navigation: Site tagline within a content property for screen readers. Navigation link styling, Mobile fixes for better spacing and alignment.
Footer Social Links: Original block was not screen-reader accessible using VoiceOver and TalkBack. Custom HTML block replacement for better descriptions, and sizing.
Newsletter, Search & Forms: Field style edits for better visibility. Error box edited for better contrast. Replacing red with the redwood brown and ivory moon text.
Squarespace Pages: Custom CSS and coding to fix internal pages. Including search results, 301 password protected pages, and blog and shop features. (As much as possible.)
And that's just a brief overview. The fact that we can't even add a compliant hover state, is ridiculous. I had to build out an entirely custom social footer link block just because it doesn't read out the social platform the icon goes to. For example, Patreon doesn't have an icon, so it uses the link icon. Which screen readers call out "link". That's it.
Adding custom CSS/development code is not best practice, and causes clunky loading. Who can we get in touch with to improve Squarespace accessibility?
-
juliaprather reacted to SquareRefresh in Gap between announcement bar and header
Hey @pipd try to add this code in Custom CSS:
.announcement-bar-reserved-space .sqs-announcement-bar-dropzone { min-height: auto; }
-
juliaprather reacted to paul2009 in Increase gallery block padding on mobile
This is specific to this site (due to the block ID). It will add the margin to both desktop and mobile. If you don't want the extra margin on desktop you can wrap it in a media query.
#block-yui_3_17_2_1_1669326727826_11330 .sqs-gallery-block-grid .sqs-gallery-design-grid-slide .margin-wrapper { margin-bottom: 34px; }
Did this help? Please give feedback by clicking an icon below ⬇️
-
juliaprather reacted to tuanphan in Announcement Bar Text Alignment 7.1
Use this CSS (Design > Custom CSS)
#announcement-bar-text-inner-id p { font-size: 16px !important; text-align: left !important; }
-
juliaprather got a reaction from whereisscott in Focal Point Snap-To-Center
Just pled my case with customer care. Be gone, snap-to-center!
-
juliaprather got a reaction from paul2009 in Focal Point Snap-To-Center
Thanks, Paul. I appreciate your thoughtful reply, and I will pass along my concern to customer care in hopes of a future toggle switch to enable or disable the snap-to-center focal point feature. Thanks again!
-
juliaprather reacted to paul2009 in Focal Point Snap-To-Center
This is due to a deliberate design choice by Squarespace in mid 2021 and is not a bug.
The focal point behaviour was intentionally changed ("to make it easier to centre"!) and this now prevents us moving it just a small distance from the centre.
There isn't anything you can do to change this behaviour. The only workaround is to use the image editor to crop part of the image so the focal point is where you need it - which is ironic because the focal point exists to avoid having to do this! 🤯
I encourage you to contact Squarespace Customer Care to request that this feature be reinstated. Nothing will happen quickly (I already voiced my concerns in Sept 2021 and nothing has happened since) but at least it will help the product teams to understand the impact these poor design choices have on user experience.
Did this help to explain? Please give feedback by clicking an icon below ⬇️
-
juliaprather got a reaction from tuanphan in Calculator widget messing up footer
Aha! Well, that's disappointing, but there'll be other good ones out there. I appreciate the explanation--now I can mourn the loss and move on lol. Thanks so much!
-
juliaprather got a reaction from creedon in Calculator widget messing up footer
Aha! Well, that's disappointing, but there'll be other good ones out there. I appreciate the explanation--now I can mourn the loss and move on lol. Thanks so much!
-
juliaprather reacted to creedon in Calculator widget messing up footer
Ah. I see the issue now.
Here's the deal. Your CSS for that calculator is based on bootstrap. BS is a website design system as SS is a design system and you are trying to have two different incompatible systems combine which causes issues.
Can you find a calculator that doesn't depend on a design system? One that is more standalone code wise?
-
juliaprather reacted to tuanphan in centering a widget?
Add to Home > Design > Custom CSS
div#block-7c7da78e25205a8850df .sqs-block-content { display: flex; justify-content: center; }
-
juliaprather reacted to Sylte in Not Saving New Content
Same issue here, the [done/save] function doesn't work, clearly a major bug. I did a lot of edits last week and everything was dismissed. Tried again today, still the same issue, clear that they shipped the solution before thinking and testing it enough, so full of bugs.
The cost of beta-releases like this will not only be big for us as users, but for brand reputation, more and more issues like this make me think twice about promoting the service for clients...
Hope this will be sorted as soon as possible.
I was hoping to find a [save] shortcut since the button is broken.
-
juliaprather reacted to paul2009 in Size of logos/images on MOBILE view
If you have found a solution please post details so that other users can benefit 🙂
-
juliaprather reacted to tuanphan in Controlling image display sizes on mobile
With padding, you used this CSS, it affects all devices
#block-yui_3_17_2_13_1457552603071_12467 { background: rgba(255,255,255,.6); max-width: 80%; } you can add this CSS under to override width on mobile
@media screen and (max-width:640px) { #block-yui_3_17_2_13_1457552603071_12467 { max-width: 95% !important; } }
-
juliaprather reacted to tuanphan in Max image size on mobile view?
Add to Design > Custom CSS
@media screen and (max-width:767px) { /* arrow */ div#block-af7714ea96ec95074f03 { width: 30%; } /* trees */ div#block-3891780a1011b77e916e { width: 30%; } }
-
-
-
juliaprather reacted to jdillagodzilla in Where 'Use Existing Gallery' in 7.1?
Wow, super annoying that you can't add a preexisting gallery and the + search option only lets you select one image at a time.
Posting so I can follow the thread.
-
juliaprather reacted to kfalconer in .sqs-announcement-bar-text, can't increase my announcement bar's font size on mobile
It didn't for 7.1, but tweaking it to this worked:
.sqs-announcement-bar { p { @media(max-width:799px){ font-size: 14px !important;} } } thank you!