Jump to content

Prevent Markdown Block from Overflowing & Hide Sticky Sidebar on Mobile

Recommended Posts

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>

 

markdown-overflow.png

Edited by afabella
Link to comment
  • Replies 2
  • Views 475
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

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