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?
extra settings for CSS for mobile
-
- Posts: 29
- 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
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
-
- 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;}
}
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;}
}
-
- Posts: 29
- Joined: Sun Feb 03, 2019 4:35 pm
Hi,
Yes exactly. Try it this way and it might work.
Best regards
Eleni
Yes exactly. Try it this way and it might work.
Best regards
Eleni
-
- Posts: 29
- Joined: Tue Jan 30, 2018 12:30 pm
Hi,
I tried it, but it doesn't work.
I tried it, but it doesn't work.
-
- Posts: 29
- 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
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
-
- 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
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