Title: Contact form text alignment wrong on tablet view Last modified: June 15, 2020 --- # Contact form text alignment wrong on tablet view * Resolved [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/) * Hi, * I was wondering how to align ‘Name’ and ‘Email’ to the left in tablet view? * The desktop and mobile view look fine but the tablet option has the text right aligned for some reason. * I would appreciate any help 🙂 I’ve been trying so much css (i’m a noob) to no avail! * Thank you in advance, * Tim * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcontact-form-text-alignment-wrong-on-tablet-view%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 11 replies - 1 through 11 (of 11 total) * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-12986664) * Apologies, * After previewing the page on [http://responsiv.eu/er.php](http://responsiv.eu/er.php) * It appears the issue is on the mobile view when turned horizontally (doesn’t look like an issue on tablets) * Cheers, * Tim * Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/) * (@ethanchoi) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-12993483) * Hi [@timmy321](https://wordpress.org/support/users/timmy321/), * It looks like there could be a styling conflict between the site theme and the forms. To fix this, please try the following custom CSS snippet: * ``` @media (max-width: 767px) { .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-sublabel { text-align: left !important; } } ``` * And in case it helps, here’s a tutorial from WPBeginner on [how to add custom CSS like this to your site](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/). * Hope this helps! * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-12996303) * Hi Ethan, * Thank you very much for replying! * Unfortunately that css does not appear to change anything. Which is frustrating because I feel like I’m just getting the hang of css and understand that ‘!important’ should overide any other form of css. * Have you any suggestions as to why this might not be working? * Cheers, * Tim * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-12996309) * Also, on a side note.. how do you find the right selector? * In this case this bit: * .wpforms-container .wpforms-field-label, .wpforms-container .wpforms-field-sublabel{ * I right click and inspect but when copying and pasting what I think should be the right selector, nothing ever seems to change? * And in this case I can’t locate this selector above anywhere? * Many thanks in advance! * Tim * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-12996675) * I’m using Microsoft edge by the way. * Also I watched this video… * I really don’t understand it fully but I get the concept.. * Could this issue be that one form of css has a higher specificity? * So if I’m trying to override an ‘id’ which is prefixed with a # (as in the video) with a ‘class’ or . as a prefix it won’t work because a # has more points than a . ? * What confuses me even more about this specificity thing is even taking into account this points system for: 1) HTML elements 2) ID’s (#’s) 3) Classes (.’s), does inline css win over all the prefixes no matter what? * I really hope I’m making some sort of sense? * Many thanks in advance again 🙂 * Tim * Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/) * (@ethanchoi) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13002960) * Hi [@timmy321](https://wordpress.org/support/users/timmy321/), * Thanks for the update! * When I used the browser tool, it looks like the site theme is causing the field labels to be centered (see [screenshot here](https://a.supportally.com/prbtKl)). * If the custom CSS is not working, it could be due to how the custom CSS is added to your site. * When you get the chance, could you let me know how the custom CSS is added to your site? * In case it helps, here are our recommended options: * 1) In your WordPress admin sidebar go to **Appearance > Customize**. Then in the Customizer sidebar that appears, go to Additional CSS to paste the code in. * 2) Alternatively, you can install and activate the [Simple Custom CSS plugin](https://wordpress.org/plugins/simple-custom-css/). With this plugin, you can paste custom CSS into its field on your site. * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13004503) * Hi ethan, * Thanks for the reply again mate. * That’s interesting about the theme. I would ask is this the theme (as I understand this would be astra), or is the webpage builder (elementor) causing the issue? I only ask because I note in that screenshot that it says elementor. * Thank you for the suggestion of how to add css in. I use the appearance, customise then add css option usually. I have tried this and the css plugin you suggest in this case and unfortunately neither have had an effect. * I’m stumped ethan, have you any other ideas? * Many thanks * Tim * Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/) * (@ethanchoi) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13008422) * Hi [@timmy321](https://wordpress.org/support/users/timmy321/), * It looks like you’re right that the styling is coming from the Elementor page builder. * A possible solution then could be to look at the style option of the widget where the form is embedded, and if there’s a text-align setting that has been set to the ‘center’ when on the tablet screen size. * Alternatively we can try to override that specific CSS with the following: * ``` @media screen and (max-width: 767px) { .elementor-8 .elementor-element.elementor-element-f47ccc1 .elementor-icon-box-wrapper { text-align: left !important; } } ``` * Please let me know how it goes 🙂 * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13013315) * Hi Ethan, * Many thanks again or your reply. * Unfortunately both of those attempts did not change anything. I did change the text alignment to left in the elementor builder option, which changed nothing. I also added that css which also changed nothing. * This is rather frustrating as just when I think I’m getting the hang of css, it doesn’t change any styling when I put it in custom css. * Could this be that Elementor does not allow any custom css? I only ask because when I’m editing with elementor, navigating to their custom css option states I need to purchase their products in order to be able to input custom css through their builder? * Whereas up to now I’ve been putting custom css through customize – additional css in wordpress. * I eagerly await your advice Ethan 🙂 * Thanks, * Tim * Thread Starter [timmy321](https://wordpress.org/support/users/timmy321/) * (@timmy321) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13014214) * Hi Ethan, * Cancel last! * So I was at the end of my tether investigating this and a bunch of other issues… It turns out for some reason (unknown to me still!), the webpage builder ‘elementor’ and the theme ‘astra’ were not playing ball with each other at all. No matter how much css I’d would put in the additional css box, no changes would happen. * I’ve bought a plugin called ‘CSS HERO’ which is amazing! Now when I put css in, it works! * I feel like I should not have had to purchase something just so the additional css option will work, however now I have I’m happy as it’s a great plugin! * Thanks for engaging with this Ethan, * Take care, * Tim * Plugin Support [Ethan Choi](https://wordpress.org/support/users/ethanchoi/) * (@ethanchoi) * [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13018322) * Hi [@timmy321](https://wordpress.org/support/users/timmy321/), * Glad to hear you’ve got it sorted, and thanks for taking the time to let us know. * Have a good one 🙂 Viewing 11 replies - 1 through 11 (of 11 total) The topic ‘Contact form text alignment wrong on tablet view’ is closed to new replies. * ![](https://ps.w.org/wpforms-lite/assets/icon.svg?rev=3254748) * [WPForms - Easy Form Builder for WordPress - Contact Forms, Payment Forms, Surveys, & More](https://wordpress.org/plugins/wpforms-lite/) * [Frequently Asked Questions](https://wordpress.org/plugins/wpforms-lite/#faq) * [Support Threads](https://wordpress.org/support/plugin/wpforms-lite/) * [Active Topics](https://wordpress.org/support/plugin/wpforms-lite/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wpforms-lite/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wpforms-lite/reviews/) * 11 replies * 2 participants * Last reply from: [Ethan Choi](https://wordpress.org/support/users/ethanchoi/) * Last activity: [5 years, 10 months ago](https://wordpress.org/support/topic/contact-form-text-alignment-wrong-on-tablet-view/#post-13018322) * Status: resolved