Hi,
Trying to use microthemer to limit the float on an element on my site that is floating too far down the page and obscuring other elements at the bottom end.
I’ve tried to read up on it but it seems a bit advanced and so far the positioning changes I’ve made have not yielded results.
Also another quick question. I used the hide feature to hide what was a line of reviews once you scroll past the event to the bottom of the page in the “you might also like” area.
The reviews were located between the title and duration/cost on each of the 4 small event boxes.
My question is that I now have an uneven looking duration & cost across all 4 elements. Is it possible to have them do better in terms of auto alignment. I thought to do it individually but I was concerned that depending on the title length it wouldn’t behave properly.
1. The ‘Book Now’ button is looking good. Did you manage to fix that since posting? Or am I missing something?
2. Regarding the alignment, there are a few ways to approach this. You can create some nested flex or grid layouts, because CSS grid and flexbox properties allow for vertical alignment. You might need to read up a bit on flexbox and css grid, which is worth doing if you have time.
A simpler workaround for now however could be to set position: relative on the boxes, which have the class ‘item‘ and ‘has-matchHeight‘. And then position the container element for the duration and cost at the bottom. This element has the class ‘st-flex‘ and ‘space-between‘. You might wish to add more descriptive classes to these elements, if possible. As they have pretty generic classes that might have been applied to various other elements on your site. But if that’s tricky, the following CSS should work:
By the way, you can set display:none via the Behaviour property group, instead of setting visibility: hidden. That way, the hidden element won’t take up space on the page.
Thanks for the detailed response. I’ll take some time and try to understand/ implement your suggestion for question #2.
In regards to my first question, I’m referring to the entire widget that houses the ‘book now’ widget, including date and # of guests. That widget floats down as you scroll down the page, but it floats too far down and obscures other elements on the page as you scroll. The floating should really end just after the FAQ section on the page.
Hey, sorry I previously missed your clarification on the first question.
As far as I’m aware, there’s no CSS-only way to hide a fixed sidebar when the user scrolls down the page to a certain point. You would need to write some JavaScript to track the user’s scroll position and then hide the element, or set position: absolute at a certain scroll point. There is some discussion about how to achieve this on stack overflow, but it requires an understanding of JavaScript.
Hi,
Thanks for the help.
I was able to fix issue #1 with your tips. The code didn’t quite work but the other information was helpful in figuring it out.
For the floating element I’d hoped there was a way to limit the lower floating value and have it stop floating at some point on the screen. Not necessarily make it disappear.
The original way it functions is demoed in the theme here https://shinetheme.com/travelerdata/hikingtourdemo/st_tour/3-day-loire-mer-extraordinaire/ .
My text window is not quite as long which is why I have my current issue.
