Selectbox CSS styling & Responsive Breakpoints for it

#1
Hi GT3 Themes,


My client needs a form in the slider.

I'm using the same Contact Form 7 form that's on the main page in the demo content with the 'date input' on the left and the 'selectbox dropdown' on the right in the 3rd row. CF7 has minimal CSS so how the elements break down into separate lines is controlled by the theme CSS.

I had an issue with the selectbox sticking out to the right of the form because it assumes a fixed size of 210px. I solved this by floating the element right within the form container, but the selectbox still has a fixed width, causing it to cover the date input on the left when viewing from smaller size screens.

I went through these CSS files:
base.css
theme.css.
bootstrap_min.css
style.css
jQuery.selectbox.css
jquery-ui.css

None of them had anything about this fixed size.
I'd also like to make the selectbox break down into a separate line a bit earlier than it does by default.

Where can I find the media queries that control this & where can I change the fixed pixel-based size of the selectbox element to something more fluid like em-s of % values?

It's breaking in different screen sizes both on Firefox & Chrome.
Attached screenshots.

Thanks in Advance!

Best Regards,
Balazs Pati
Collective Marketing Solutions LTD
Attachments
03 - fixed size selectbox.jpg
02 - fixed width selectbox covers date input.jpg
01 - slider form - date & select same width.jpg
Post Reply

Return to “Spa Beauty and Hair Salon WordPress Theme - Beyoutiful”

Who is online

Users browsing this forum: No registered users and 1 guest

cron