desiredisco asked 1 year ago
https://www.starlight.events/contact-us/ is where the problem is occuring.
If you access the page on a mobile device then proceed to select a date, the datepicker doesn't allow you to select Fri / Sat as they aren't visible on the screen.
Having inspected the element, I can see the following CSS can change the size of the calendar so it fits, however, I cannot translate these changes to formidable itself (it's as if it's being ignored, even with !important tag added), and so I cannot change the appearance of the form.
min-width: 0em;
Any help with getting this CSS to my site and working would be appreciated.
Thank you,
Matthew
Rob LeVine Staff answered 1 year ago
Did you try
.frm-datepicker {
min-width: 0em;
}
desiredisco
replied 1 year ago I did, yes. It had no effect. I put this in the custom CSS section of my theme customisation. I also added !important after 0em and before ;
Thank you for your response 🙂
Victor Font Staff answered 1 year ago
You should be using .ui-datepicker to set the min-width to 0em instead of frm-datepicker.
That’s definitely the right class to target. You can see this for yourself in the inspector. Are you placing the script in the before fields area of the form’s custom HTML page? Are you clearing all caches?
desiredisco
replied 1 year ago Yes, this is what I had been changing in the element when using inspect. Anything I put across into the custom CSS area, regardless of where I've put it has had no effect. Here's what's in the custom CSS at present (including the .ui-datepicker line:
#home-hero {
background-color: transparent;
}
.hero-title {
font-size: 3em;
line-height: 1;
color: #000000;
margin: 20px 0;
}
#home-section {
padding: 10px 0 10px;
}
.home-section-2 {
background: transparent;
}
.home-section-2, .home-section-4 {
background-color: transparent;
}
#body .ui-datepicker {
min-width: 0em; !important
}
desiredisco
replied 1 year ago I've now changed to the following (but it has no effect):
#home-hero {
background-color: transparent;
}
.hero-title {
font-size: 3em;
line-height: 1;
color: #000000;
margin: 20px 0;
}
#home-section {
padding: 10px 0 10px;
}
.home-section-2 {
background: transparent;
}
.home-section-2, .home-section-4 {
background-color: transparent;
}
.ui-datepicker {
min-width: 0em; !important
}
!important goes before the semi-colon. Not after. Your code is still wrong.
desiredisco
replied 1 year ago That's done the trick, I'm sure I'd amended that previously so it always helps to have a fresh pair of eyes. Thank you so much!
Please login or Register to submit your answer