afabella

@tuanphan Can you please help me?

Site URL: https://www.longevitycollective.com/nad-sciences/nad-and-longevity

Hi!

I am trying to achieve two things:

• Prevent my Markdown box from overflowing into the Comment section and
• Hide the sticky sidebar (in my Markdown box) on mobile view

Here is my header code. I have tried several things to no avail. How do I fix this?

<style>
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
  
.sidebar {
    /*background-color: #fafafa;
    box-shadow: 5px 5px 0 #f09;
    box-sizing: border-box;
    padding: 20px;8
    border: 3px solid #e1ccbe;*/
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    width: 20%;
    height: 20vh;
    text-size-adjust:auto;
    display: block;
    word-wrap:break-word;
}

.main {
  width: 70%;
  /*height: 150vh;*/
}
 
.main, .sidebar {
  padding: 10px;
}

body {
  padding: 10px;
}
  
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
  
.nad-blog-post-section-title {
  color: #e1ccbe;
  text-align: justified;
}
  /*html {
    scroll-behavior: smooth;
  }*/
</style>

@creedon Thank you for your reply! I found that it was easiest to just use the DNS method for verifying the domain for Facebook ads. 

https://developers.facebook.com/docs/sharing/domain-verification/verifying-your-domain/

Site URL: https://www.longevitycollective.com/

Is it possible to add an HTML to the root directory of a Squarespace website? I am trying to use Facebook ads.

Hi @iamdavehart! Thank you for your response. It still isn't working for some reason, even though the phone number was working elsewhere on the website. I ended up doing something else instead. Thanks anyway!

Site URL: https://www.longevitycollective.com/

I want to add my phone number as a social link in my nav bar with a custom social icon. The phone number worked before I customized the icon using Custom CSS in the Design tab (I changed it from a link icon to a phone icon). How do I make the link work again? 

@media only screen and (min-width:640px) { 
  .icon--fill:nth-of-type(1) {
    svg {
      display:none;
    }    
    background-image: url(https://static1.squarespace.com/static/5f36d4af8e875e5e656a5141/t/610d8c78b6c78c0c2e56a9c8/1628277880548/phone-icon.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  
.header-menu-actions-action:nth-of-type(1) {    
  svg { 
    display:none;    
  }    
  background-image: url(https://static1.squarespace.com/static/5f36d4af8e875e5e656a5141/t/610d8c78b6c78c0c2e56a9c8/1628277880548/phone-icon.png);    
  background-size: 100%;    
  background-repeat: no-repeat;  
}

It worked! Thank you so much @tuanphan

@tuanphan I meant disable scroll (on desktop only, not mobile). The code didn't work for me unfortunately. Any other suggestions?

I'm not sure if I used it properly. I used: 

 @media only screen and (max-width: 768px) {width: 100% !important; height: 100% !important; overflow: hidden !important}

Is this what you meant? If so, it still isn't working unfortunately.

Site URL: https://www.longevitycollective.com/newsletter

I am trying to disable scrolling on desktop only on one page (I want to still be able to scroll on mobile). Here is the code I added to the header to disable scrolling:

  html, body {width: 100% !important; height: 100% !important; overflow: hidden !important}

I've only been able to find posts about completely disabling desktop and mobile, or just mobile only. How can I fix this?