Shadmon

Please watch this video :

Can you send the url to your website?

Hi @turnerelectrical You can adjust the space between the items by increasing the margin 0px. If you add this css, you will see no space between the items: adjust the margin px for the height.

.header-menu-nav-item a {
    margin: 0px auto;
}

Let me know if it works.

Can you share the page url so that I can check and help you.

Can you add this css and let me know if it works?

.header-nav .header-nav-item--folder .header-nav-folder-content {
    backdrop-filter: blur(4px);
    background: transparent !important;
}

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");
   }

}

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;
}
}

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.

@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.

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.

@Timma89 Please use the updated code. I have made the changes and it will fix the issue.

Let me know if you need any help!

Thank you for letting me know. It might not work as expected on iOS devices due to their rendering engine. Can you send me your website URL so I can provide a solution?
Thanks.

Please send the URL of the page where you are facing the issue.

Thanks.

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;
      }
    } 
  }
}

Hi, You can check out this solution here:

Let me know if it helps!

Hi, Sure you can do that. You can add this code to Website > Website Tools > Custom CSS

@media only screen and (max-width: 767px) {
  .products .grid-item {
    width: 100% !important;
  }
}

Let me know if it works!

Hi, You can use Dancing Script. You can add this code to Website > Website Tools > Custom CSS

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

h4 {
  font-family: "Dancing Script", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

 

Hi Tim, Maybe you need to consider implementing a lightbox feature for the iFrame pop-up. This would activate when users interact with the button.

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!

I have updated it. Please use the updated code now.

Please add this CSS code to your website; your popup will appear in the middle of the mobile screen. You can add this code to Website > Website Tools > Custom CSS

@media (max-width: 600px) {
.sqs-popup-overlay {
    top: 15% !important;
}
}

Hi @LucieGbt1993 You can add this code instead :

// 2000 milliseconds = 2 seconds -> You can change the number to delay. For example: 5000 will be 5 seconds.

You can send the URL to your website where you are facing the issue.

Can you send me the website URL?