-
Posts
7,445 -
Joined
-
Last visited
-
Days Won
89
Community Answers
-
Ziggy's post in Floating Header won't center justify was marked as the answer
I made one smaller tweak to your code in the margin line, and removed the LEFT and RIGHT as they were unnecessary:
header { position: fixed; margin:4vw auto; max-width: 450px; background-color: rgba(160, 160, 160, .1)!important; backdrop-filter: blur(5px)!important; border-radius: 15px }
-
Ziggy's post in How to hide image captions (descriptions) in masonry grid gallery on squarespace mobile? was marked as the answer
You can use this Custom CSS:
@media only screen and (max-width: 767px) { .gallery-caption-grid-masonry { display:none; } } Let me know how that goes!
-
Ziggy's post in Custom image URLs was marked as the answer
Sorry, you can't change the URL that an image is hosted at, simply not an option.
-
Ziggy's post in Remove blog post element was marked as the answer
Try this CSS:
.blog-item-injection { display:none; }
-
Ziggy's post in Logo overlaping header on mobile only was marked as the answer
You have this in Custom CSS that is overriding the default header logo settings:
header#header img { max-height: 320px !important; } and this that is unseating it from the header:
.header-title-logo a { display: inline-block; } If you wrap this code that is probably just designed for desktop in a medai query like this then it shouldn't affect the mobile site:
@media only screen and (min-width:768px) {
/* code here */
}
-
Ziggy's post in How do I center the social media links in the header? was marked as the answer
Try adding this to Custom CSS:
.header-display-desktop { flex-direction: column-reverse; } .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%; width: 100%; } .header-layout-branding-center-nav-center .header-actions--left .header-actions-action--social .icon:last-child { margin-right: 0vw; }
-
Ziggy's post in Typewriter effect making page/photos "jump" - any suggestions? was marked as the answer
It looks like the text is stretching the block and grid, and when going between 1 and 2 lines you get a layout shift. If you make the block taller do better accommodate the content does that help?
-
Ziggy's post in make masonry grid one column only on mobile and only on one page was marked as the answer
Either add this to the page header code injection for the page you want to apply it to (wrapping in style tags).
Or use the page collection ID in front of the code you have, and place that code in curly brackets.
-
Ziggy's post in Why are my links linking back to a squarespace domain when i have paid for my own was marked as the answer
The link works just fine for me, not a hint of a problem.
It's probably just happening for you because you are logged in. If it happens elsewhere it's because your link is wrong.
-
Ziggy's post in Resize font on mobile was marked as the answer
The text is smaller on mobile, but the responsiveness is designed to keep the text legible on different screen sizes, which generally means relatively larger on mobile devices. I don't think there's anything wrong with your website but you could position the text and image better for the mobile layout, i.e. tweak the image focal point, and lower the text towards the bottom of the image.
-
Ziggy's post in Needing help to hide a block from Mobile View was marked as the answer
The code you are using is style code rather than a script. You also have the wrong breakpoint value for mobile and you are using min instead of max (max will apply to all screen-size values below 767px)
If you are putting this into the page header code injection it should look like this:
<style> @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1710192540269_931 { display: none !important; } } </style> But you could put it in the Custom CSS panel as that's easier to edit, and if you do that you don't need any tags so it would look like this:
@media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1710192540269_931 { display: none !important; } } I hope that helps!
-
Ziggy's post in Hiding nav menu links for specific pages was marked as the answer
Try this Custom CSS:
// hide links on every page .header-menu-nav-item:nth-child(1) {display:none;} .header-menu-nav-item:nth-child(3) {display:none;} .header-menu-nav-item:nth-child(6) {display:none;} #collection-65e2265c5a803a43536b24c4 { // show links on homepage .header-menu-nav-item:nth-child(1) {display:initial;} .header-menu-nav-item:nth-child(3) {display:initial;} .header-menu-nav-item:nth-child(6) {display:initial;} // hide links on homepage .header-menu-nav-item:nth-child(2) {display:none;} .header-menu-nav-item:nth-child(4) {display:none;} .header-menu-nav-item:nth-child(7) {display:none;} }
-
Ziggy's post in How do I show logo and site title in the header? was marked as the answer
Okay, here we go! Add this to Custom CSS:
// adjusting header navigation width .header-title-nav-wrapper { flex: 1 0 80%; } .header-layout-nav-center .header-title { width: 20%; flex: 1 1 20%; } .header-layout-nav-center .header-nav { width: 60%; flex: 1 1 60%; } // addition of company name above navigation .header-nav::before { content: "Kate's Design Cottage"; display: block; text-transform: uppercase; font-size: 2rem; color: --solidHeaderNavigationColor; font-weight: 600; margin-bottom: 12px; } All in one, let me know how it goes!
-
Ziggy's post in Remove Image Titles and Descriptions was marked as the answer
You can use this general code in Custom CSS, but it will hide the gallery meta on every page, if that's not what you want then I can help you specify more tightly how this code is applied.
.sqs-gallery-block-stacked.sqs-gallery-block-show-meta .meta { display: none; }
-
Ziggy's post in Change masonry gallery section to display one column in mobile or change order of images in mobile columns was marked as the answer
Try this Custom CSS:
@media screen and (max-width: 767px) { .gallery-masonry-wrapper.gallery-masonry-list--ready { height: auto !important; columns: 1 !important; } .gallery-masonry-item img { width: 100% !important; } }
-
Ziggy's post in Remove extra space to align left on mobile was marked as the answer
It looks like you have an indent set on this text, remove that and you won't have the extra space:
-
Ziggy's post in How do you stack the checkbox form field answer options side by side? was marked as the answer
Try with !important:
.form-field-checkbox-layout-stack .sqs-block-form .form-item.checkbox { flex-direction: row !important; }
-
Ziggy's post in Button on mobile overlay navigation can't be seen was marked as the answer
Add this to Custom CSS:
.header--menu-open .header-menu .header-menu-cta { margin-bottom: 60px; }
-
Ziggy's post in When Blocks and Sections are assigned IDs? was marked as the answer
This is for a block.
This is a global class.
Blocks will always have a unique block ID, which is generated when you create the block.
All of the global elements, header components, footer, block types etc. have classes and IDs like .header-nav-list or .sqs-block .image-block
-
Ziggy's post in CSS distorting Square Space interface and functionality was marked as the answer
The styling you are adding is targeting general classes, (e.g. body, svg, circle, svg, #svg-container) these get used by the underlying website and dashboard and are cause it to display unpredictably. It's advisable to use unique classes and IDs when adding custom code/styling so that these styles only affect your code.
-
Ziggy's post in Grid mosaic gallery caption displayed to low on mobile was marked as the answer
Try this in Custom CSS:
@media screen and (max-width: 800px) { .gallery-masonry-item-wrapper { margin-bottom: 0px !important; } .gallery-caption-grid-masonry { margin-bottom: 12px; } }
-
Ziggy's post in self-scroling carousel (but no arrows) was marked as the answer
Yes, that's a list section, try this guide:
https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71
-
Ziggy's post in Change Portfolio Title Colors was marked as the answer
Try this Custom CSS:
#collection-65c688c40ffe822f35ed37e6 { .portfolio-grid-basic .grid-item .portfolio-title:nth-child(1), .portfolio-grid-basic .grid-item .portfolio-title:nth-child(2), .portfolio-grid-basic .grid-item .portfolio-title:nth-child(3) { color:#FF590C; } }
-
Ziggy's post in Header Issues on Mobile with Five Template was marked as the answer
The mobile logo is set here, the yellow circled URL is the uploaded file that shows on mobile and that isn't a high enough resolution. If you upload a higher-resolution file and swap out the URLs that will solve that problem. Out of interest, what happens when you delete this code on the mobile view?
The code at the end is dummy code that should be deleted as it's not doing anything.
-
Ziggy's post in Add Third Column was marked as the answer
If you add a new image block to that section, then click and drag it to the right of the other two images it will snap into place and it'll change to 3 columns. You may need to adjust the widths by clicking inbetween the columns but it should by default be even widths.