@raphaelibele how can I replicate this?
I think when you load the page on ipad and change it to long side…
the problem apparently also occurs with firefox
@raphaelibele is it possible to move the sticky class to the next div and check if it solves the issue? Check screenshot
https://u.pcloud.link/publink/show?code=XZTlUIkZSIpS7xCgsy54xx2BoDme4uC2KWQ7
The problem is that the content page have two-column, one with 4 and another with 8 of size… When You set stick class to the 4 one it is actually moved from the place which makes the bootstrap to think that It has to move the column 8 to the left.
Chrome has some AI render engine that can predict that You are doing something dynamic and that’s why We can’t see it happen there… Other browsers just limit themself to do CSS job, which on my opinion is the best approach.
Hey Manuel,
thanks a lot for your answer. I tried it but it doesnt work… (it is not sticky anymore)
Do you have another idea?
Thanks
@raphaelibele the other solution is to try to add a css style to the right column in order to force it to stay always there… Is the only way that comes to my mind
Thanks for your answer. Is it possible to give the element with the placeholder-class a new one? (sticky-element-placeholder)
Actually the problem here is that the flatsome theme sets the left column to full width as seen here:
View post on imgur.com
Removing this class by either removing it altogether, removing just the !important statement or setting !important on the ‘sticky-element-placeholder’ fixes the issue.
View post on imgur.com
Another and even better (and probably easier) solution is to prevent the flatsome class to be activated in the first place. The selector makes sure every class gets width: 100% that is NOT a ‘col’. So actually just giving the ‘sticky-element-placeholder’ element the class ‘col’ fixes the issue:
View post on imgur.com
Which leads to the question: Is it possible to set additional classes for the ‘sticky-element-placeholder’ element and if not, can you @manuelrocha88 implement this?
-
This reply was modified 5 years, 11 months ago by
jsbrain.
Ok i fixed it with javascript
@jsbrain well we don’t need extra class there… We can work using the already existing CSS class. When there is no sticky happening, the class placeholder is div.sticky-element-placeholder.col. When sticky happens we get div.sticky-element-placeholder.col.sticky-element-active.
Adding Your css style suggestion to div.sticky-element-placeholder.col.sticky-element-active should do the job.
@raphaelibele great You solved it.
