Jump to content

PlasticArcade

Member
  • Posts

    21
  • Joined

  • Last visited

Community Answers

  1. PlasticArcade's post in Help... Rollover hover effect causes page to jump around? was marked as the answer   
    Solution!...
    So I have two solutions to my problems...
    First Solution
    for the invisible elements that get shown if I have a visible object that is the size of the my page or larger, in my case I used a shape along the left side of the page that stretched the whole height this kept invisible elements from shrinking the page when they disappeared, there may be a coding way around this like making the page stay the same dimensions even if elements are are larger than the page are but I don't know this code.
    Second Solution
    This is less of a solution and more of a bandaid, however...
    The issue is with Squarespace API that when I use CSS code to alter the page in some way, note; it's usually only visual code elements that cause the issue, but my solution at the moment is to remove all my CSS code for the block I am working on and save it in a separate text doc then paste it back once I make the changes. Unfortunately this doesn't fix the issue causing the problem but it does keep me from pulling hair out when my page elements jump around on me as I watch my whole page destruct itself in front of my eyes
    SO for the meantime I will be removing my code when I edit a page then put it back again once finished, at least until Squarespace fixes their CSS code problem.
    Additionally 
    another thing that could work is to add a code in your CSS that turns it off when you are editing a page and back on when you are viewing it live. I assume this would fix the issue but I'm not sure and I do not know how to code that in CSS.
    So that's about it
  2. PlasticArcade's post in How do I fix anchor Scrolling effect in external links? was marked as the answer   
    Well I couldn't figure out a way to fix my links like I had in my Wordpress sites in the past so instead here was my solution to the problem...
    Instead of making the links function differently on different pages I just hid the primary menu on my home page and created a custom menu which had the jump to anchor links in it.
    Then I use the regular menu with normal links in my other pages so I can get the scroll effect on the main site and use the normal everywhere else.
    Here is the code I used to create the solution
     
    /*HORIZONTAL STICKY CONTENT NAV - 7.1*/
    section[data-section-id="61b115821e337f2af945c3e4"] {
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
      opacity: 0.95;
      min-height: 0 !important;
      position: sticky !important;
      -webkit-position: sticky !important;
      top: 0;
      z-index: 999;
    }
    section[data-section-id="61b115821e337f2af945c3e4"] .content-wrapper {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
    }
    section[data-section-id="61b115821e337f2af945c3e4"] .html-block {
      padding-bottom: 0 !important;
      text-align: center;
    }
    section[data-section-id="61b115821e337f2af945c3e4"] .html-block p {
      display: inline-block;
      margin: 0 20px;
    }
     
    I did not come up with this code myself I found it here from this YouTube video and website
    https://beatrizcaraballo.com/blog/sticky-content-navigation-squarespace
    Hope this helps anyone that is trying to do a similar thing.
    She goes through several different kinds of menu navigations, really great video.
     
  3. PlasticArcade's post in How do I add an image wrapper shape to a list image? was marked as the answer   
    alright so this was my best solution I could figure out.
    since I think to make this work I would need to use code injection which I don't have access to, I am using the effect I want on an image in my footer this way the ID can be grabbed from there and applied to any page that I want it on.
    I was going tp use an assets page that was unlinked and just link or call to that element from that page but I could't get it to work. 
    So at this time unless someone can show me another way, the only way to use the rounded square clipping mask on your list images is to have the shape element used already on a picture in the page with the list or carousel.
    here is my code I used
    //-- List image clip Round Square
    section[data-section-id="61af1790fc334c5c2cf3597d"] .list-item .list-image {
        clip-path: url(#yui_3_17_2_1_1639017864666_15988);
        -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    }
    //-- Carousel Image clip Round Square
    section[data-section-id="61aedbcb31c0e67b5079a058"] .user-items-list-carousel__slide .user-items-list-carousel__media-inner {
        clip-path: url(#yui_3_17_2_1_1639017864666_15988);
        -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    }
    Code Breakdown
    - the first part is the section or block id targeting the specific list I want
    section[data-section-id="61af1790fc334c5c2cf3597d"]
    - then there is the list id - this targets the lists or second one which targets carousels (you can use this without the block/section id and it will target all lists or carousels)
    .list-item .list-image
    - Last was the capping mask path which I grabbed from the image in my footer, I just used my logo because I wanted it there anyways. (You can apply the desired clipping mask to any image in the page though. You can also apply it to a transparent png this way the effect and image are not seen in your footer, you can use these as custom spacer images. This will allow you to still use the effect with no code injection needed)
        clip-path: url(#yui_3_17_2_1_1639017864666_15988);
        -webkit-clip-path: url(#yui_3_17_2_1_1639017864666_15988);
    Keep in mind that these codes are unique and you will have to grab the ones from your own site.
    its not a better solution but its a solution unless someone can give a better one
    And here's the result in the image below
     

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