Calendar problems

[Christine Ros]

Hello,

I first uses Oceanica + hotel pluging to a pet hotel needs, but as I am not a coder/dev I can’t succeed to make it look as I want. So, I change Oceanica to Page Builder Framework (mainly top menu can be off) + Elementor.

So, on single room booking page, the display of calendar is not good : the first column shows actual Month on the top of Year to choose from.

It took me 3 days to find the good selector and fix the way it look like adding in custom CSS

select, input[type=”datetime”]
{width: 40%;}

But, there is another problem I can’t find the issue, the calendar is too short on the right – no border right is shown.

I use developper mode in Opera browser to find the where to make change, I found

div class=”datepick datepick-multi mphb-datepicker-light-yellow style width: 435px”

Setting 455px works fine in Opera dev tool but, I must be wrong with custom css because nothing change. Here what I set in custom css

.datepick .datepick-multi .mphb-datepicker-light-yellow {width:455px;}

Can you help me please ?

[Stacy Lind]

Hi Christine,
It is difficult to advise without seeing the page code.
Please, provide a link to your page, so that we could see the problem. You can send it here as a private reply or submit as a ticket.

[Christine Ros]

Hello Macy,

Here a link

calendar display

Thank you

[J. Davis]

Hi Christine,

Thank you for provided link. It looks like your style was not applied due to spaces between classes.
You can also try to use the code below:

.datepick.datepick-multi.mphb-datepicker-light-yellow{
    width: inherit !important;
}

best regards,
John

[Christine Ros]

Hello M. Davis

Delete space doesn’t work but your css code is good.
Thank you.

[J. Davis]

Hi Christine,

I’m happy to hear that it works. Your style would work too after you removed spaces if you add !important after the value in pixels.

best regards,
John

[Author]

Posts