-
Posts
-
Support helped me with a contact form on my site to make it transparent. It works great on my computer but on mobile devices it does not for some reason. How can I get it to look the same on mobile devices? See images
#top div .av-light-form input[type='text'] { border: 3px solid #fff !important; background-color: rgba(255,255,255,.5) !important; }Hi djshortkut!
Please try the following in Quick CSS under Enfold–>General Styling:
@media only screen and (max-width: 767px) { #top div .av-light-form input[type='text'] { border: 3px solid #fff !important; background-color: transparent !important; } }Best regards,
RikardThanks Rikard. I tried this code and it still does not work. Can’t figure out why my mobile devices don’t show the form as a transparent the way it does on a desktop. Any other quick css I can try?
No. What device are you using to pull it up like that? When I pull it up on my iPhone 6 and iPad 4 it still looks like the picture I attached for some reason. I have flushed the cache numerous times on these devices so not sure why it keeps showing up like that. Any other ideas?
Hey djshortkut,
May we have temporary access to your website? Be sure to insert that information in the private content section.
I’m still seeing a white box when on my nexus 4, but it displays properly at all widths on browsers.
Best regards,
DakeYes, I noticed that too. On all browsers it works fine, and even when you resize the browser. It just doesn’t display correctly on mobile devices for some reason. Here’s the login information.
Hi djshortkut,
The form field should be transparent accross the boards now.
I added the below css because it was clashing with another style:
@media only screen and (max-width : 320px) { .page-id-6920 #top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area { color: white !important; background: #018db0 !important; } }This one in particular:
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area { border: none!important; background-color: #f5f5f5!important; }Best regards,
DakeIt’s still not working correctly on my mobile devices and whatever you changed screwed up some of my site.
1. I had it set before so that the “submit” buttons on contact forms upon hover would have a background of #018db0 and the text would be white which is no longer working.
2. When the shrinking header shows up, the active title is supposed to be #018db0 and when you hover over each menu item they are supposed to be #018db0. The code that made this work is below. Not sure what was changed to make this stop working.
#top .av-main-nav li a:hover .avia-menu-text, #top .av-main-nav li.current-menu-item > a > .avia-menu-text { color: #018db0 !important; }Can you please help me fix?
Hey djshortkut,
The mobile menu and sticky menu are now back to how they were before.
I have contacted the rest of our team to take a look into getting the email field to display properly on mobile.
Regards,
DakeThanks Dake! Everything appears to be working as it was before. The only issue I’m still having is the email field not displaying correctly on my mobile devices. If someone can please help me fix this I would greatly appreciate it. Thanks!
Hi!
it seems to display fine for me:
Could you fix it? or how do you want it to be displayed?
Regards,
AndyNo it isn’t fixed yet. What browser and device are you using? It’s supposed to look like your screen shot but on my iPhone 6 and iPad 4 the email box has a solid white background. Instead it should have a 3px white border and a transparent background. When I resize my browser window it shows correctly so I don’t know why it wouldn’t show correctly on these devices. I have flushed the cache numerous times and refreshed the browser and it doesn’t help. I have also tried friends iPhone’s and iPad’s that have never pulled up the site before and the same thing happens so it definitely isn’t a caching issue. Not sure why the iPhone and iPad wouldn’t just display the same thing that you see on a browser.
Hey!
hmm … I can see this could in your source code:
#top div .av-light-form input[type='text'] { background-color: rgba(0,0,0,0.2) !important; }so everything should be fine. Maybe you are using another code which interferes the settings? Please check your Quick CSS and custom.css (child theme as well) files.
Try to add this code, to make sure it will also work on mobile devices:
@media only screen and (max-device-width: 1024px) { #top div .av-light-form input[type='text'] { background-color: rgba(0,0,0,0.2) !important; }}Cheers!
AndyOk, so I finally figured out the code that it conflicting with this code to make it show up incorrectly on my mobile devices. The background color is what is causing the issue. What I want to do is have the background color of all of the contact forms on my site have a background color of #f5f5f5 Can I either target these with a page id or a custom class? They all use the default style contact form. I have a custom class of contact-form selected for these contact forms. I have provided all of the pages that currently have the default style contact form in use where I want the background to remain #f5f5f5
So to recap I want to have the background color of all of the default contact forms #f5f5f5 so this code doesn’t affect the light contact form anymore. Thanks!
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area { border: none !important; background-color: #f5f5f5 !important; }Hey!
you could include page-id into your code: https://en.support.wordpress.com/pages/#how-to-find-the-page-id
and/or turn on custom class for all alb elements to be able to give your elements a unique CSS class.Hope this helps.
Cheers!
AndyThanks Andy! Can you please give me an example of quick css for this page and then I can duplicate for the other pages? I know how to find the page-id and have a custom class of contact-form set for each of the contact forms I need to apply this code to. The problem is that this code is affecting the transparent form that I was having an issue with above. The border and background color are being applied to the transparent contact form and that is what is causing the issue, when I remove that code the transparent contact form works fine on mobile.
I just need an example of some quick css to modify the code below to remove the border line around the contact form and change the background color to #f5f5f5 for each of the input fields on this specific page/form and then I can duplicate for the other pages. Thanks!
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area { border: none !important; background-color: #f5f5f5 !important; }Hey!
not sure if I fully understand. So you already know how to find your page-id and also which unique CSS class your forms have, right? now you only want to know how to call the different input fields of the form on the website in your private content, right? if yes, then remove this code from your Quick CSS/custom.css:
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area { background-color: #f5f5f5 !important; }and use this code:
input#avia_name_1 { background-color: red !important; } input#avia_email_1 { background-color: red !important; } input#avia_telephone_1 { background-color: red !important; } input#avia_date_of_event_1 { background-color: red !important; } input#avia_event_venue_1 { background-color: red !important; } select#avia_event_type_1 { background-color: red !important; } select#avia_best_time_to_be_reached_1 { background-color: red !important; } input#avia_how_did_you_hear_about_us_1 { background-color: red !important; } textarea#avia_additional_questions_or_event_1 { background-color: red !important; }Cheers!
Andy
- The topic ‘Transparent Contact Form’ is closed to new replies.