Limiting float on an element

Tagged: 

Author Posts

nena3001 December 31, 2019 at 1:20 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

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.

Any help would be appreciated.

Sebastian December 31, 2019 at 12:34 pm

Hey,

Sure, I’m happy to help. Could you send me a link to the page with a description of which element you’re having issues with?

Thanks,
Sebastian

nena3001 December 31, 2019 at 7:20 pm

Hi Sebastian sorry about that.

Here’s the information:
url: http://staging.blackoutdooradventurers.com/st_tour/10-days-of-vacation-in-florence-resorts-2/
The element is the blue ‘book now’ widget to the right of the page.

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.

Thank you.

Sebastian January 2, 2020 at 12:43 pm

Hey,

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:

.item.has-matchHeight {
position: relative;
}

.item.has-matchHeight .body .st-flex {
  position: aboslute;
 bottom: 15px;
}

You can create custom selectors in MT: https://screencast-o-matic.com/watch/cFnVqco4Eh

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.

Cheers,
Sebastian

nena3001 January 2, 2020 at 8:20 pm

Hi Sebastian!

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.

Thanks

Sebastian January 7, 2020 at 10:36 am

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.

Cheers,
Sebastian

nena3001 January 8, 2020 at 3:32 am

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.

Thanks

Sebastian January 9, 2020 at 3:50 pm

Hey,

Having inspected the demo, I can confirm this effect is achieved with JavaScript. See this video: http://somup.com/cYVQodfKcg

Perhaps the theme has some configuration options for the scrolling sidebar…

Cheers,
Sebastian

nena3001 January 9, 2020 at 5:28 pm

Thanks for the video explanation!
I see what you mean and I’ll poke around the theme to see if I can find a way to change it.
Thanks again!

Sebastian January 9, 2020 at 5:55 pm

You’re welcome 🙂

You must login or register to reply to this topic.