Jump to content

Ziggy

Circle Member
  • Posts

    7,445
  • Joined

  • Last visited

  • Days Won

    89

Community Answers

  1. 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 }  
  2. 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!
  3. 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.
  4. Ziggy's post in Remove blog post element was marked as the answer   
    Try this CSS:
    .blog-item-injection { display:none; }  
  5. 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 */
    }
  6. 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; }  
  7. 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?
  8. 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.
  9. 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.
  10. 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.
  11. 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!
  12. 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;} }  
  13. 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!
  14. 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; }  
  15. 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; } }  
  16. 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:

  17. 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; }  
  18. 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; }  
  19. 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
  20. 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.
  21. 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; } }  
  22. 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
  23. 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; } }  
  24. 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.

  25. 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. 
     
×
×
  • 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.