Jump to content

jjqwd

Member
  • Posts

    4
  • Joined

  • Last visited

Posts posted by jjqwd

  1. Hi Ziggy,

    I removed then added back the CSS line by line, this was the culprit: 

    //Events font readjust mobile
    @media screen and (max-width: 767px) and (orientation: portrait) {
    [data-collection-type^="events"] .item-pagination-title {
        font-size: calc((1.6 - 1) * calc(.012 * min(100vh, 900px)) + 0.5rem);
    }
    }

    All working now, thanks for your help!

    Billy

  2. Thanks for taking a look over this Ziggy! It's quite a lot of CSS. I haven't seen any errors in the syntax checker:

    //Fonts
    @font-face {
    font-family: GothamLight;
    src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd0212d2ad6f612178ec36/1643971090755/GothamLight.ttf);
    }
    
    @font-face {
    font-family: GothamMedium;
    src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd01e39ce0ed35c38fe42c/1643971043714/GothamMedium.ttf);
    }
    
    @font-face {
    font-family: GothamBold;
    src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd01fb7bac0e69d2db9e16/1643971067928/Gotham-Bold.otf);
    }
    
    @font-face {
    font-family: GothamBlack;
    src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd02043fff576e24494360/1643971076852/Gotham-Black.otf);
    }
    
    @font-face {
    font-family: CreamyCoconut;
    src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/61fd0f9833d00e727ef15a5e/1643974552360/Creamy+Coconut.ttf);
    }
    
    @font-face {
      font-family: BigCaslon;
      src: url(https://static1.squarespace.com/static/614b1ebfeab1fb1318624d26/t/620e195d80a01b53b36fd5ef/1645091165825/big-caslon.ttf);
    }
    
    
    //Setting Fonts
    h1, h2, h4, .newsletter-form-header-title {
    font-family: 'GothamBlack' !important;
    }
    
    h3, .sqs-block-button-element--medium, .sqs-block-button-element--large, .newsletter-form-button, .sqs-block-image a {
      font-family: 'CreamyCoconut' !important;
      font-weight: 400;
    }
    
    .sqsrte-large, .sqsrte-small, .header-nav-item a {
      font-family: 'GothamMedium' !important;
    }
    
    @media only screen and (max-width: 768px) {
    .accordion-item__title-wrapper {
      font-family: 'arial' !important;
    }
    }
    
    p {
      font-family: 'GothamLight' !important;
      font-weight: 600 !important;
    }
    
    // Spotlight Navigation Style //
    .header-nav-list:hover > .header-nav-item {
      opacity: 0.5;
    }
    
    .header-nav-list:hover > .header-nav-item:hover {
      opacity: 1.0;
    }
    
    // Spotlight Navigation Folder Style //
    
    .header-nav-folder-content:hover > .header-nav-folder-item {
      opacity: 0.5;
    }
    
    .header-nav-folder-content:hover > .header-nav-folder-item:hover {
      opacity: 1.0;
    }
    
    //Footer Logo
    #block-yui_3_17_2_1_1635934882779_5005 {
      max-width: 100px;
    }
    
    //Home Page Banner Image
    @media only screen and (min-width: 769px) {
      section[data-section-id="61fd083ef847ff495f4d4472"] {
        display: none;
      }
    }
    
    @media only screen and (max-width: 769px) {
      section[data-section-id="614c5ea43849b54d902ff140"] {
        display: none;
      }
      
      section[data-section-id="61fd083ef847ff495f4d4472"] {
        top: 50px !important;
    }
    }
    
    //Mobile Banner Logo Size
    @media only screen and (max-width: 769px) {
    #block-yui_3_17_2_1_1645132835816_66206, #block-yui_3_17_2_1_1645004143967_2298, #block-yui_3_17_2_1_1645018043774_4298, #block-4c8bc84ec0048133ff12,#block-78bd3db738c4f2e7b7a5, #block-yui_3_17_2_1_1645028235880_4364, #block-yui_3_17_2_1_1645189969577_1877, #block-yui_3_17_2_1_1645652057141_3103 {
      max-width: 200px !important;
      max-height: 200px !important;
      padding: 0px !important;
    }
    }
    
    //Mobile Testimonial Images
    @media only screen and (max-width: 769px) {
    #block-yui_3_17_2_1_1644959167296_20433, #block-813662e6300ce640cf4c, #block-e383630715c6b64b9f01, #block-yui_3_17_2_1_1644965192007_7088, #block-4b36c5388ddcc6004d4d, #block-yui_3_17_2_1_1645008520145_78910, #block-0c8cec64ab1578a82f70  {
      max-width: 150px;
      margin: auto;
      padding: 0px !important;
    }
    }
    
    //Mobile Home Page Clock Image
    @media only screen and (max-width: 769px) {
    #block-7967a9d943c5364e048f {
      max-width: 150px;
      margin: auto;
      padding-top: 0px !important;
      padding-bottom: 50px !important;
    }
    }
    
    //Mobile About Page Bus Shelter Image 
    @media only screen and (max-width: 769px) {
      #block-yui_3_17_2_1_1644962237429_29284 {
        max-width: 250px;
        margin: auto;
        padding-top: 0px !important;
        padding-bottom: 50px !important
      }
    }
    
    //Mobile Contact Page Logo
    @media only screen and (max-width: 769px) {
    #block-yui_3_17_2_1_1646057497430_4046 {
      max-width: 150px;
      padding-top: 0px !important;
      padding-bottom: 0px !important;
    }
    }
    
    
    //Home Page Split Section
    section[data-section-id="63b426c7ccee314b7198a6d2"] 
    #block-e11e03034cb2ec306855, section[data-section-id="63b426d04a1a734ddcf5740a"]  #block-e03b201e3fc97fa58cda { 
      max-width: 100px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    
    
    //Hide background play button
    section[data-section-id="63b426c7ccee314b7198a6d2"] { .background-pause-button .paused .visible, .background-pause-button.visible {
      visibility: hidden!important;
    }
    }
    
    .background-pause-button {
      display:none !important;
    }
    
    //Home Page Blog Summary
    #block-yui_3_17_2_1_1632395027009_9656 { 
      img:hover {
        opacity: 0.5;
      }
      
      a:hover {
        font-weight: 500;
      }
    }
    
    //Blog Page 
    section[data-section-id="614c5bd8980f2d75cf15c633"] {
      img:hover {
        opacity: 0.5;
      }
      
      a:hover {
        font-weight: 500;
      }
    }
    
    //Hide Events From Store
    .grid-item.tag-hide-product {
        display: none;
    }
    
    //Background Art Pause Button
    .background-pause-button.visible {display: none!important}
    
    //Event Page Links
    .eventitem-backlink, .event-meta-addtocalendar-container {color:red}
    
    //Our Offer Events Block
    #block-yui_3_17_2_1_1633362377206_7362 { img {
      border: 2px hsl(200, 30%, 21%) solid;
    }
      img:hover {
        opacity: 0.5;
      }
      
      a:hover {
        font-weight: 500;
      }
    }
    
    //Events Page Image & Link Hover
    section[data-section-id="614c5befdf75166bc8be5eed"] { img {
      border: 2px hsl(200, 30%, 21%) solid;
    }
      img:hover {
        opacity: 0.5;
      }
      
      a:hover {
        font-weight: bold;
      }
    }
    
    //Events font readjust mobile
    @media screen and (max-width: 767px) and (orientation: portrait) {
    [data-collection-type^="events"] .item-pagination-title {
        font-size: calc((1.6 - 1) * calc(.012 * min(100vh, 900px)) + 0.5rem);
    }
    }
    
    //Our Work Page Card List Buttons
    .list-item-content__button {
      font-size: 1.6rem !important;
    }
    
    //Image Card Button
    .sqs-block-image a {
      font-size: 1.6rem !important;
    }
    // Expanding Button On Hover //
    .sqs-block-button .sqs-block-button-element--medium, button.sqs-editable-button.join-button, .list-item-content__button {
        transition: transform 0.3s !important;
    }
      
    .sqs-block-button .sqs-block-button-element--medium:hover, button.sqs-editable-button.join-button:hover, .list-item-content__button:hover {
        opacity: 1 !important;
        transform: scale(1.07) !important;
    }
     
    .newsletter-block .newsletter-form-button:hover {
       opacity: 1 !important;
        transform: scale(1.07) !important;
    }
    
    p a:hover {
      color: #F75854 !important; 
    }
    
    //Meet The Team 
    figcaption.gallery-caption.gallery-caption-grid-simple {
    h4 {
      font-size: 100%;
      font-weight: bold;
      letter-spacing: 0.1px !important;
      margin: 0px !important;
      text-align: center;
      }
      
      p {
      letter-spacing: 0.2px !important;
      margin: 5px !important;
      text-align: center;
      }
      
      h4 :hover {
        opacity: 0.8;
      }
    }
    
    //Make Meet The Team Images Circular
    section[data-section-id="62175b182199c62329e4a6d0"] img, section[data-section-id="6217a616ba652805bbc20e19"] img, section[data-section-id="62289532e66e0a30d23440fa"] img {
      
      border-radius: 50% !important;
    }
    
    section[data-section-id="62175b182199c62329e4a6d0"] img:hover, section[data-section-id="6217a616ba652805bbc20e19"] img:hover, section[data-section-id="62289532e66e0a30d23440fa"] img:hover {
      
    opacity: 0.6 !important;  
    }
    
    //Anchor Links
    :target:before {
    content:"";
    display:block;
    height:120px; /* fixed header height*/
    margin:-120px 0 0; /* negative fixed header height */
    }

     

  3. Hi! I've been updating my website with custom CSS code and it has mostly stopped working. I can see the changes on the previewer when logged in, but on the live site none of the CSS code appears to be taking effect. Does anyone have any ideas?

    I'd like this code to work, we have a different banner image for desktop and mobile. Currently both are being displayed on desktop and mobile.

    @media only screen and (min-width: 769px) {
      section[data-section-id="61fd083ef847ff495f4d4472"] {
        display: none;
      }
    }
    
    @media only screen and (max-width: 769px) {
      section[data-section-id="614c5ea43849b54d902ff140"] {
        display: none;
      }
    }

    Thanks so much!

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