Home > Programming, Servers & Scripts >

Sticky element in right column (5)

12-03-2020 02:53 AM #1 bhal07 (Member)
Sticky element in right column

I’m looking for a simple and efficient method to having a sticky CTA on the right column of a typical advertorial landing page that stays fixed in position after scrolling in to view.

Ideally pure CSS but I can’t find a solution that is mobile responsive (2 columns side by side becoming stacked vertically into a single column in mobile view).

12-03-2020 05:06 AM #2 jack_l (Veteran Member)

I think most people doing those are just using Wizzi.io or Clickfunnels... I wouldn't be surprised if Landerlab has some like that in it's 'Templates' though...

If you're looking for the actual code though I can't help - over my head

I'm sure one of the whip-smart folks on here who knows about that kind of stuff can help though.

12-03-2020 07:22 AM #3 jeremie (Moderator)

Originally Posted by bhal07

Ideally pure CSS but I can’t find a solution that is mobile responsive (2 columns side by side becoming stacked vertically into a single column in mobile view).

What behaviour do you want on mobile? Shall it just be sticked on the right on desktop and follow the flow on mobile, or do you want it to stick on the bottom on mobile?

Here are some ideas. Share more details / lander if needed something else.

You can use something like:
All the time:

Code:

#stickyelementID  {
   position:fixed
   top: 40px
}

Stick only on screens > 500px:

Code:

@media screen and (min-width: 500px) {
#stickyelementID  {
   position:fixed
   top: 40px
}
}

Stick top only on screens > 500px / and stick bottom on mobile

Code:

@media screen and (min-width: 500px) {
#stickyelementID  {
   position:fixed
   top: 40px
}
}
@media screen and (max-width: 499px) {
#stickyelementID  {
   position:fixed
   bottom: 10px
}
}

12-03-2020 07:32 AM #4 plutus (Member)

Stuff that Jeremie posted will be enough to solve your issue. In case it wouldn’t work or you would like something more customized PM me your landing page URL as without that it’s just a guessing game.

Sent from my iPhone using STM Forums mobile app

12-03-2020 02:10 PM #5 bhal07 (Member)

Okay thanks jeremie that what you just showed there is exactly how I was thinking it works too, just not working for me on this lander. plutus i'm gona send a pm your way thanks

Home > Programming, Servers & Scripts >