Overlap end of section

[leo55]

Hi 

This is my website:

stainforthgardenlodge.co.uk

If you can see on the home page I have my purple bar with searching for availabiltiy - but when I click on the date a calendar should appear underneath - does anyone know how to get the calendar to overlap the end of the section?

Thanks

p.s I know I could lengthen the section to accommodate it all but then it would be alot of purple space empty unless someone clicked, so looking to avoid that option.

[BJ5]

Add this after the rest of your embed code and it should let it show:

<style>
    #491687950933020890
    {
        overflow-y: visible !important;
    }
</style>

[leo55]

Hi @BJ 

Thank you for your reply.

I've changed to this:

<div class="ftb-widget" data-id="18398" data-token="NBKuz2XBy2U3kACFzDdQt8k4En6wxn8dtJI7zabmAKtzenFgycVepJrmXMVAA"></div><script src="https://widget.freetobook.com/widget.js"></script><style>
#491687950933020890
{
overflow-y: visible !important;
}
</style>

Is that right?

Thank you  

[leo55]

Hi @BJ 

I noticed that i think it is actually the snippet is cutting off. 

I made the section longer - much longer and same issue?

I think it might be the size of the snippet?

I updated the site if you could take a look I'd be grateful.

Thank you

[BJ5 · Accepted solution]

It seems to be not using the rule for some reason. Try this instead:

<style>
    .wcustomhtml
    {
        overflow-y: visible !important;
    }
</style>

Also, instead of putting it in the Embed Code element, go to the Pages tab, click on this page then SEO Settings, and put it in the Footer Code field for the page.

[leo55]

Hi @BJ 

Thank you very much!

Its working now - I do have one more question - I want to put it on every page, is there a footer for every page to save me having to keep puting it in for individual pages?

Thank you 

[BJ5]

Yes - you could put it in Settings > SEO > Footer Code and it'll add it to all pages instead. 

[leo55]

Hi @BJ 

Thank you very much!

Its all working now

[BJ5]

Woohoo!

[leo55]

Hi @BJ 

Thanks for all your help but things have take a turn!

I've noticed that the issue still happens on mobile (though desktop is aboslutley fine)

Do you have any advice re mobile?

Thank you

[BJ5]

Ahhh. Try this instead:

<style>
    #491687950933020890
    {
        overflow-y: visible !important;
    }
    @Media screen and (max-width: 767px)
    {
        .wsite-section-elements, .content-wrap .container
        {
            overflow-y: visible !important;
        }
    }
</style>

[leo55]

Hi @BJ 

I've deleted the original and pasted that in instead, is that right or do I need to keep both?

Thank you very much

[BJ5]

That's exactly right (deleting the old and using the new). Did it work for you?

[leo55]

Hi @BJ 

I'd swapped old for new and its under my google analytics 

Its not working I'm afraid, on mobile or desktop?

Have you any thoughts as your first one was working fine on desktop but no mobile?

Thank you

[BJ5]

Oh, I see why it's not working on desktop (I copied the wrong code when I made the new code). Try this:

<style>
    .wcustomhtml
    {
        overflow-y: visible !important;
    }
    @Media screen and (max-width: 967px)
    {
        .wsite-section-elements, .content-wrap .container
        {
            overflow-y: visible !important;
        }
    }
</style>

[leo55]

Hi @BJ 

This is what I got happening on Mobile (desktop is the same)

Thank you

[leo55]

@BJ I've tried the latest one, all still in the footer section under my google analytics and I deleted the second one, so there is still only the latest on there?

Would it help to see the snippet used for the calendar/search box, there is also a line that was put in the header code for each page as well?

Thank you

[BJ5]

Oh! It looks like the closing tag of your Google Analytics code was cut out when you pasted in the style code.

[leo55]

Hi @BJ 

Do I need to delete the GA snippet and start again with that first and that ought to help fix things?

Thank you 

[BJ5]

That's probably the simplest way so you don't need to compare code side-by-side (it's what I'd do too, just 'cause it's faster).

[BJ5]

No worries! Happens to all of us.

Try this version with a slight tweak:

<style>
    .wcustomhtml
    {
        overflow-y: visible !important;
    }
    @Media screen and (max-width: 967px)
    {
        .wsite-section-elements, .content-wrap .container
        {
            overflow: visible !important;
        }
    }
</style>