Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

CSS HELP — Two 50% wide cols with sticky left col


MatthewTDC
Go to solution Solved by rwp,

Question

Site URL: https://www.thedesignconference.com.au/best-agency-application

Hey there gang.

Im trying to use the SQSP code component to create a website section featuring two 50% wide columns. The left column features a h2 header, with the right column featuring four paragraphs of text. My goal is to use 'position: sticky' on the h2 header in the left column, to pin the h2 to the top of the browser while the user scroll through the section.

— — — — — — — — — — — 

My CSS

— — — — — — — — — — — 

.orb-questions-wrapper {
    display: flex;
    background-color: #FFF;
    overflow: visible;
    float: left !important;
}

.orb-questions-left-column {
    position: -webkit-sticky     !important;
    position: sticky !important;
    top: 0px !important;
  
    width: 50% !important;
    float: left !important;
}

.orb-questions-right-column {
    width: 50% !important;
    float: right !important;
}

— — — — — — — — — — — 

My HTML

— — — — — — — — — — — 

<div class="orb-questions-wrapper">

<div class="orb-questions-left-column">

<h2>Heading</h2>
  
</div>

<div class="orb-questions-right-column">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis congue ipsum. Mauris eu sapien in tortor ullamcorper fermentum. Pellentesque id pretium ante, ut consectetur odio. Sed at orci neque. Nullam quis facilisis ipsum. Donec eleifend lectus feugiat ante pharetra viverra. Phasellus cursus lacus vel gravida porta. Fusce rhoncus, nisl eu commodo ornare, lectus ex condimentum tortor, eleifend tristique nunc dolor in nisi. Fusce consequat volutpat massa aliquam dictum. Nulla in luctus risus, mattis laoreet lorem. Nullam at nisi venenatis, eleifend leo et, finibus diam. Donec id ligula condimentum, consectetur urna eget, faucibus neque. Ut nec commodo odio, et tempor quam. Proin at tempus odio, a egestas augue. Integer eu consectetur est, vel vestibulum quam.</p>
  
<p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p>
  
<p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p>
  
<p>Quisque eget metus ornare, suscipit sem quis, posuere nunc. Quisque interdum molestie mauris, at finibus dui finibus quis. Duis nec tristique arcu. Mauris dignissim diam nec est aliquam sodales. In congue, odio non sagittis placerat, mauris est tristique massa, non aliquet ligula nisi interdum mi. Nunc posuere in ipsum quis commodo. Maecenas laoreet, mi et egestas varius, libero nulla ullamcorper sem, sed feugiat ex ipsum nec dolor. Cras nisl elit, feugiat non leo vel, euismod venenatis ex. Curabitur et vehicula dolor, id sagittis tortor. In sit amet enim feugiat, scelerisque neque nec, volutpat leo. Nullam eu leo libero. Integer dictum mollis laoreet. Curabitur massa dolor, venenatis a venenatis vel, commodo a libero.</p>

</div>

</div>

— — — — — — — — — — — 

I know I am missing something simple.

Please help.

Thanks in advance — Matt TDC

Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

11 answers to this question

Recommended Posts

  • 0

Thanks for the update RWP. I made the edit, added the div with the StickMe ID and still nothing. I think there is something pre-existing in the SQSP code that is preventing this from working. I cant for the life of me figure it out. The updated code you created is live here: https://www.thedesignconference.com.au/best-agency-application — I would be forever grateful if you can find the bug. Ive gotten to the point where I'm guessing (more than ever haha)

Link to post
  • 0

@rwp: Maaaaaaaattttttttte! How could I ever repay you!? Whats your instagram (I'm matthew.tdc on insta) so I can add ya? I'd love to send you a thank you gift! BIG UPS! Im so grateful! Thank you mate! You're a rock star!

Link to post
  • 0

You will also need to remove all of the !important's from the #StickMe css, and add in this to make up for the fixed mobile bar.

@media screen and (max-width: 674px) {
  #StickMe {
    top: 115px !important;
  }
}

 

Link to post
  • 0
1 minute ago, MatthewTDC said:

@rwp: Maaaaaaaattttttttte! How could I ever repay you!? Whats your instagram (I'm matthew.tdc on insta) so I can add ya? I'd love to send you a thank you gift! BIG UPS! Im so grateful! Thank you mate! You're a rock star!

I don't have an instagram, I do have a contribute link on my website, though I never expect anything for helping out here.

Link is in my signature. 👍

Link to post
  • 0

HI I am also interested to know how to make 1 of 2 columns sticky when you scroll the other up to the end. I will be on 7.1 template Beaumont. Many thanx

Link to post
  • 0
12 hours ago, ocpl said:

The site is till under dev so you cannot see it

We could see it if you set up a site-wide passwordPost the password here.

We can then take a look at your issue.

It is difficult not being able to work on the actual site. Even though it is based on a template. Changes you've made to the site may effect how the custom code would be created.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...