Jump to content

dearnaomichan

Circle Member
  • Posts

    33
  • Joined

  • Last visited

Posts posted by dearnaomichan

  1. PW: flagrant

    I just need another developer to help me see what I am not seeing. I am trying to add css to force the nav menu into a hamburger for desktop too, but for some reason it's on the left side of the logo? I think I just need another set of eyes on this to help me figure out whats happening. I want it on the far right side instead of the far left. 

     

    This is the code I'm adding in, it's worked for me in the past but for some reason now it's not:

    .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;}

     

    Thank you to anyone who gets a second to look.

  2. Site URL: https://thehighguide.squarespace.com/

    Hello

    I'm having issues with my font not showing on devices other then my own. because its already installed on my computer, I think? But either way, when I check other devices, it looks like the fonts are loading to the website when I check under Application > Fonts in dev tools. I've preloaded the fonts so they're present, but not showing up on the website. Any help is extremely helpful, I truly don't understand whats going on. Do we need to purchase the subscription or something for it to show on 7.1?

    The fonts are Chap Regular and Sneak Regular. There are a lot of SVGs and PNGs with the font exported in it, but the live text doesn't show the font. This is what its suppose to look like: (attached img)

    pw: guide

    Please help!! Thank you so much for any advice!

    Screen Shot 2021-07-11 at 8.43.27 PM.png

     

  3. Hey @tuanphan , do you mind helping me with a similar (but kinda different) issue? 

    My font on my website won't show on any other devices (except for my computer, the one with the font loaded to it already). I uploaded them via the Custom File Manager and linked them:

     

    @font-face {
      font-family: 'Chap', sans-serif;
      src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff),
    url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf);
    
    }
    
    
    @font-face {
      font-family: 'Sneak-Regular', sans-serif;
      src: url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff),
    url(https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf);
    }
    
    
    h1, h2, .image-title.sqs-dynamic-text h4 {
       font-family: 'Chap', sans-serif !important;
    }
    
    a, p, h3, h4, h5, h6, .sqs-block-collectionlink a, .sqs-block-button-element, .header-title:after, .sqs-block-quote blockquote, input {
      font-family: 'Sneak-Regular', sans-serif;
    }

     

    I check on someone else's device and I can't see any of the custom fonts, but since I'm preloading them they're showing up in the Dev Tools Application area. If I don't preload them, then they don't show up in the Dev tools at all. But either way the font doesn't show up on the website. 

    preloaded in the Code Injection Header area:

    <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c09e742d9264d45cfab2/1624555678728/Chap+Regular.woff" as="font" type="font/woff" crossorigin="anonymous">
    
    <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c108a6105b3a57b2a280/1624555784250/Chap-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous">
    
    <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c0b1e8b78c2e37d7b78c/1624555697236/Sneak-Regular.woff" as="font" type="font/woff"  crossorigin="anonymous">
    
    <link rel="preload" href="https://static1.squarespace.com/static/60bd2b4a17103210544bf776/t/60d4c173b0883a4b7153979b/1624555891816/Sneak-Regular.ttf" as="font" type="font/ttf"  crossorigin="anonymous"> 

     

    Maybe its something wrong with the font links but I don't get whats going on. Any help is appreciated!!

    https://thehighguide.squarespace.com/
    pw: guide

  4. @sorca_marian ok great because that would be extremely helpful! I am specifically trying to stick the A-Z element on the first section of this page (https://thehighguide.squarespace.com/glossary-a pw: guide) so it sticks at the top over the other section below it. I've make sticky elements within the same section, but never over other sections.

    But i've found that Jquery is extremely heavy and weights down the website. Thats why I asked about vanilla javascript. Any advice would be helpful, Thanks!

  5. UPDATE: I'm having issues linking ALL my SVG images, not just on this page. I feel like it might be a 7.1 template issue? Since I can't upload and SVG image to an image block or in the CSS File Manager, I must upload it on a separate page and use the link to the image. I've done this several times before in the past but for some reason on this website it isn't working. I've reached out to SqSp Help Email to see if they can shed any light on the issue of a link to a file in the file manager not working.

  6. Hi @creedon ! Thanks for responding.

    I have uploaded the files in a separate page (thats not linked) so I can use the URL in the CSS:

    1541715776_ScreenShot2021-05-25at12_58_10PM.thumb.png.2be9d861c59415c501e88b129c3e0c05.png

    57529685_ScreenShot2021-05-25at12_59_55PM.thumb.png.47e6e785632c457a9861e2dba6e0d772.png

     

    Heres all the CSS for this accordion section on this page (specifically .tab-label::after) :


     

    // Loan Programs Section
    .programs__row input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    
    /* Layout */
    .programs__row {
      display:flex;
    }
    
    .programs__row .programs__col {
      flex:1;
    }
    
    .programs__row .programs__col:last-child {
      margin-left: 1em;
    }
    
    /* Accordion styles */
    .tabs {
      overflow: hidden;
    }
    .tab {
      width: 100%;
      border-bottom: 1px solid white;
      overflow: hidden;
    }
    
    .tab:first-child{
        border-top: 1px solid white;
    }
    
        .tab-label {
          display: flex;
          justify-content: space-between;
          padding: 2.5rem;
          cursor: pointer;
          align-items: center;
           transition: all .35s ease;
        }
    
        /* Icon */
        .tab-label::after {
          content: url(/s/dropdown-arrow.svg);
          width: 3em;
          height: 3em;
          text-align: center;
          transition: all .35s ease;
          vertical-align: middle;
        }
    
        .tab-content {
          background: #0071BE;
          color: white;
          max-height: 0;
          padding: 0 2.5em;
          transition: all .35s ease;
        }
        .tab-close {
          display: flex;
          justify-content: flex-end;
          padding: 1em;
          font-size: 0.75em;
          cursor: pointer;
        }
    
    
     /* :checked */
    input:checked ~ .tab-content {
      //background: blue;
        max-height: 200vh;
        padding: 2em 2.5em;
      }
    
    input:checked ~ .tab-label {
       //background: white;
    }
    
    input:checked + .tab-label::after {
      transform: rotate(90deg);
    }
    
    
    .tab-content .tab-button a{
      display: block;
    }

     

  7. Site URL: https://www.redmondfunding.com/

    For some reason the SVG links for this website aren't showing up on the live site but showing on the editor. It's the arrows on the right side of the accordion.
     

    on this page: https://redmond-funding-group.squarespace.com/loan-programs
    pw: redmond


    I just need another set of eyes on this. I think that it might be because I'm using a :after pseudo class but why would that be a problem?

  8. @Agha_Waqas

    I am trying to do this exact thing with a custom code block and can't get it to work. I made this locally on my computer to test it before plopping it in but it's not working. Can you please take a look and see if what I'd doing wrong?

    Heres the website
    I'm trying to do this in the black section down where it says "Let's make your website dreams come true"

    I'm trying to make the text on the right stick while you scroll through the work on the left (I havent added the work yet, just trying to make the sticky work right now)

     

  9. Site URL: https://mcad-grad-exhibit.squarespace.com

    Hello,
    I have created a website with multiple individual pages that are each using a summary block to pull in graduates by category (this website is for a college graduation exhibit). Each graduates category is their major and the season they graduated. I would like to use the individual pages as the category pages because currently the link .../[blog name]/category/[category name] is uncontrollable visually.

    I want to use the individual pages so that for each major it says the major at the top of the page. Also the summary block I'm using has Lazy Summaries which allows me to view up to 100 grads.

    See an category page here: https://mcad-grad-exhibit.squarespace.com/graduates/category/Animation
    You can see that it says nothing at the top. I could add "Graduates" but if someone clicked on a major under one of the students names, it might be confusing if it doesn't say the major.

    See the individual page I made here: https://mcad-grad-exhibit.squarespace.com/animation
    You can see that it says "Animation" at the top.

    Ideally I would like to redirect the category slug to the simple slug I've created, the pages using the summary blocks. 

    Any thoughts would be greatly appreciated. Thank you in advance.

    PW: grad2020

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