Jump to content

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

Recommended Posts

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 comment
  • Replies 11
  • Views 620
  • Created
  • Last Reply

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 comment
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 comment
  • 2 months later...
On 11/20/2020 at 10:52 PM, ocpl said:

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

Can you share site url? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.


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