Page 1 of 1

extra settings for CSS for mobile

Posted: Wed Jul 08, 2020 3:10 am
by team.miura.beds24
Hi,

I am having trouble with CSS for mobile booking engine.

I am trying to hide some numbers from the drop down menu for upsell:
#optextra2 option:nth-child(n+8){display:none;}
#optextra3 option:nth-child(n+8){display:none;}
#optextra4 option:nth-child(n+8){display:none;}
#optextra5 option:nth-child(n+8){display:none;}
#optextra6 option[value="1"] {display:none !important;}
#optextra6 option:nth-child(n+8){display:none;}
#optextra7 option[value="1"] {display:none !important;}
#optextra7 option:nth-child(n+8){display:none;}
#optextra8 option[value="1"] {display:none !important;}
#optextra8 option:nth-child(n+8){display:none;}
#optextra9 option[value="1"] {display:none !important;}
#optextra9 option:nth-child(n+8){display:none;}
#optextra10 option[value="1"] {display:none !important;}
#optextra10 option:nth-child(n+8){display:none;}
#optextra11 option[value="1"] {display:none !important;}
#optextra11 option:nth-child(n+8){display:none;}
#optextra12 option[value="1"] {display:none !important;}
#optextra12 option:nth-child(n+8){display:none;}
#optextra13 option:nth-child(n+8){display:none;}
#optextra14 option:nth-child(n+8){display:none;}
.daysat{color:#c44a2f !important;}
.daysun{color:#c44a2f !important;}
.datestay{border: 1px solid #2f2f2f !important;}
.roomofferqtyselectlabel{display: block;}
.b24-selector-numnight{display:none;}

This code is working for PC site, but it is not working for mobile.

I have tried adding:
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>

It is now working on my Chrome simulator, but not on real devices.

Has anyone encountered the same issue and know the solution?

Re: extra settings for CSS for mobile

Posted: Thu Jul 09, 2020 10:24 am
by eleni mylona
Hi,

Try to place right after the first CSS code also this one:

@media (min-width: 576px)
#optextra2 option:nth-child(n+8){display:none;}
#optextra3 option:nth-child(n+8){display:none;}
#optextra4 option:nth-child(n+8){display:none;}
#optextra5 option:nth-child(n+8){display:none;}

#optextra6 option[value="1"] {display:none !important;}
#optextra6 option:nth-child(n+8){display:none;}
#optextra7 option[value="1"] {display:none !important;}
#optextra7 option:nth-child(n+8){display:none;}
#optextra8 option[value="1"] {display:none !important;}
#optextra8 option:nth-child(n+8){display:none;}
#optextra9 option[value="1"] {display:none !important;}
#optextra9 option:nth-child(n+8){display:none;}
#optextra10 option[value="1"] {display:none !important;}
#optextra10 option:nth-child(n+8){display:none;}
#optextra11 option[value="1"] {display:none !important;}
#optextra11 option:nth-child(n+8){display:none;}
#optextra12 option[value="1"] {display:none !important;}
#optextra12 option:nth-child(n+8){display:none;}
#optextra13 option:nth-child(n+8){display:none;}
#optextra14 option:nth-child(n+8){display:none;}

.daysat{color:#c44a2f !important;}
.daysun{color:#c44a2f !important;}
.datestay{border: 1px solid #2f2f2f !important;}
.roomofferqtyselectlabel{display: block;}
.b24-selector-numnight{display:none;}

This might do the trick.

Best regards
Eleni

Re: extra settings for CSS for mobile

Posted: Mon Jul 13, 2020 1:45 am
by team.miura.beds24
Dear Eleni,

Thank you for your reply.

Do you mean like this:
#optextra2 option:nth-child(n+8){display:none;}
#optextra3 option:nth-child(n+8){display:none;}
#optextra4 option:nth-child(n+8){display:none;}
#optextra5 option:nth-child(n+8){display:none;}

#optextra6 option[value="1"] {display:none !important;}
#optextra6 option:nth-child(n+8){display:none;}
#optextra7 option[value="1"] {display:none !important;}
#optextra7 option:nth-child(n+8){display:none;}
#optextra8 option[value="1"] {display:none !important;}
#optextra8 option:nth-child(n+8){display:none;}
#optextra9 option[value="1"] {display:none !important;}
#optextra9 option:nth-child(n+8){display:none;}
#optextra10 option[value="1"] {display:none !important;}
#optextra10 option:nth-child(n+8){display:none;}
#optextra11 option[value="1"] {display:none !important;}
#optextra11 option:nth-child(n+8){display:none;}
#optextra12 option[value="1"] {display:none !important;}
#optextra12 option:nth-child(n+8){display:none;}
#optextra13 option:nth-child(n+8){display:none;}
#optextra14 option:nth-child(n+8){display:none;}

.daysat{color:#c44a2f !important;}
.daysun{color:#c44a2f !important;}
.datestay{border: 1px solid #2f2f2f !important;}
.roomofferqtyselectlabel{display: block;}
.b24-selector-numnight{display:none;}


@media (min-width: 576px) {
#optextra2 option:nth-child(n+8){display:none;}
#optextra3 option:nth-child(n+8){display:none;}
#optextra4 option:nth-child(n+8){display:none;}
#optextra5 option:nth-child(n+8){display:none;}

#optextra6 option[value="1"] {display:none !important;}
#optextra6 option:nth-child(n+8){display:none;}
#optextra7 option[value="1"] {display:none !important;}
#optextra7 option:nth-child(n+8){display:none;}
#optextra8 option[value="1"] {display:none !important;}
#optextra8 option:nth-child(n+8){display:none;}
#optextra9 option[value="1"] {display:none !important;}
#optextra9 option:nth-child(n+8){display:none;}
#optextra10 option[value="1"] {display:none !important;}
#optextra10 option:nth-child(n+8){display:none;}
#optextra11 option[value="1"] {display:none !important;}
#optextra11 option:nth-child(n+8){display:none;}
#optextra12 option[value="1"] {display:none !important;}
#optextra12 option:nth-child(n+8){display:none;}
#optextra13 option:nth-child(n+8){display:none;}
#optextra14 option:nth-child(n+8){display:none;}

.daysat{color:#c44a2f !important;}
.daysun{color:#c44a2f !important;}
.datestay{border: 1px solid #2f2f2f !important;}
.roomofferqtyselectlabel{display: block;}
.b24-selector-numnight{display:none;}
}

Re: extra settings for CSS for mobile

Posted: Mon Jul 13, 2020 10:37 am
by eleni mylona
Hi,

Yes exactly. Try it this way and it might work.

Best regards
Eleni

Re: extra settings for CSS for mobile

Posted: Tue Jul 14, 2020 1:22 am
by team.miura.beds24
Hi,

I tried it, but it doesn't work.

Re: extra settings for CSS for mobile

Posted: Tue Jul 14, 2020 6:04 am
by eleni mylona
Hi,

I have tested this code on my mobile and it is working fine. Most likely it is a cache matter. Try from a different phone.

Kind regards
Eleni

Re: extra settings for CSS for mobile

Posted: Fri Jul 17, 2020 8:24 am
by team.miura.beds24
Dear Eleni,

Could you help me check:
https://www.beds24.com/booking2.php?pro ... 2-258430=0

The number 1 is still choosable on smartphones:
https://pasteboard.co/Ji2A06G.jpg