Jump to content

Shadmon

Circle Member
  • Posts

    237
  • Joined

  • Last visited

  • Days Won

    8

Posts posted by Shadmon

  1. Yes, you can do that. Change the background image url for <600px devices.

    @media (max-width: 600px) {
       header#header::after {
           background-image: url("https://svgshare.com/i/15tm.svg");
       }

    }

  2. Yes, you can do that. Change the background image url for <600px devices.

    @media (max-width: 600px) {
       header#header::after {
           background-image: url("https://svgshare.com/i/15tm.svg");
       }

    }

  3. Okay, Please update the other CSS code with this. It's the final one. It should work. Let me know how it goes.

    @media (max-width: 600px) {
    .header .header-title--use-mobile-logo .header-mobile-logo img {
        max-height: 40px;
    }
    .header-announcement-bar-wrapper {
        padding-bottom: 5px !important;
        padding-top: 10px !important;
    }
    header#header::after {
        height: 20%;
        margin-top: -5px;
    }
    }

  4. To achieve a scrollable homepage with navigation to other pages without clicking on each page's title then create a single page layout where all the content from different pages is displayed sequentially on the homepage and on the navigation bar you can create anchor links to the sections.

  5. @Timma89 If you want to target smaller devices then please add this code too:
     

    @media (max-width: 380px) {
        header#header::after {
            margin-top: -5px;
        }
    }

    Let me know how it goes.

  6. You can add this code to Website > Website Tools > Custom CSS

    [data-section-id="6626b10328da752ad0d1e1e3"] .html-block {
        background: transparent !important;
    }
    [data-section-id="6626b10328da752ad0d1e1e3"] .fe-block {
        mix-blend-mode: normal !important;
    }

    .sqs-block-image .image-overlay, .sqs-block-image .sqs-image-content::after, .sqs-block-image .image-block-wrapper::after {
        opacity: 0 !important;
        background-color: transparent !important;
    }

    It will fix the issue.

  7. Sure, You can do that. Here is the updated code. Replace the data-section-id with yours. 
    
    [data-section-id="123"]{
      .section-background{
        &::after {
        /*creating the element*/      
          content: "";
          width:100%;
          height:100%;
          position: absolute;
          
          /*adding the image*/  
          background-image:url(image.jpeg);
          background-repeat:no-repeat;
          
          /*positioning the image*/  
          background-size:cover;
          background-position:center center;
          background-attachment: fixed;
          
          /*mobile*/  
          @media(max-width:787px){
            background-position:center center;
            background-attachment: fixed !important;
          }
        } 
      }
    }
  8. Hi, You can add this code to Website > Website Tools > Custom CSS

    @media (max-width: 600px) {
    .header .header-title--use-mobile-logo .header-mobile-logo img {
        max-height: 40px;
    }
    .header-announcement-bar-wrapper {
        padding-bottom: 5px !important;
        padding-top: 10px !important;
    }
    header#header::after {
        height: 20%;
    }
    }

    Let me know if it helps!

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