extra settings for CSS for mobile

Everything related to your website and the Beds24 widgets
Post Reply
team.miura.beds24
Posts: 29
Joined: Tue Jan 30, 2018 12:30 pm

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?
eleni mylona
Posts: 9
Joined: Sun Feb 03, 2019 4:35 pm

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
team.miura.beds24
Posts: 29
Joined: Tue Jan 30, 2018 12:30 pm

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;}
}
eleni mylona
Posts: 9
Joined: Sun Feb 03, 2019 4:35 pm

Hi,

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

Best regards
Eleni
team.miura.beds24
Posts: 29
Joined: Tue Jan 30, 2018 12:30 pm

Hi,

I tried it, but it doesn't work.
eleni mylona
Posts: 9
Joined: Sun Feb 03, 2019 4:35 pm

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
team.miura.beds24
Posts: 29
Joined: Tue Jan 30, 2018 12:30 pm

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
Post Reply