Introduction
Would you like to change the styling on your Likert Scale form field for mobile devices only? With a few lines of CSS you can easily alter the appearance of this field for mobile devices. Inside this tutorial, we’ll show you how easy it is to alter the appearance and walk you through each step.
Creating your form
First, you’ll need to create your form and add your required fields, this will include at least one Likert Scale form field.
If you’re not sure how to do this, please review this documentation.
Viewing the form on mobile devices
When viewing the form on a smaller screen, you’ll notice that for longer labels and titles, the text may not have the desired appearance.
Adding the CSS
Now it’s time to add some CSS to your site that will alter the look of this field on smaller screens. If you need help adding CSS to your site, please review this tutorial.
In order to target only the smaller screens, we have to add our CSS using a media query.
A CSS media query is specifically a set of CSS styling rules that would only be applied when the screen size meets a certain requirement.
To learn more about CSS Media Queries, please review the W3 Schools website.
For our media query, we only want our CSS to be applied when the screen size is no more than 760px or between 768 and 1024px.
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .wpforms-field-likert_scale table, .wpforms-field-likert_scale thead, .wpforms-field-likert_scale tbody, .wpforms-field-likert_scale th, .wpforms-field-likert_scale td, .wpforms-field-likert_scale tr { display: block !important; } .wpforms-field-likert_scale th { padding-left: 6px !important; font-weight: bold !important; } .wpforms-field-likert_scale thead tr { position: absolute !important; top: -9999px; left: -9999px; } .wpforms-field-likert_scale tr { border: 1px solid #ccc !important; } .wpforms-field-likert_scale td { border: none !important; border-bottom: 1px solid #eee !important; position: relative !important; padding-left: 50% !important; } .wpforms-field-likert_scale td:before { position: absolute !important; top: 6px !important; left: 6px !important; width: 45% !important; padding-right: 10px !important; white-space: nowrap !important; } .wpforms-field-likert_scale td:nth-of-type(1):before { content: "Very Unsatisfied"; } .wpforms-field-likert_scale td:nth-of-type(2):before { content: "Unsatisfied"; } .wpforms-field-likert_scale td:nth-of-type(3):before { content: "Neutral"; } .wpforms-field-likert_scale td:nth-of-type(4):before { content: "Satisfied"; } .wpforms-field-likert_scale td:nth-of-type(5):before { content: "Very Satisfied"; } }
It’s important to know when using this CSS, shown above, that your ratings labels are not translatable since they are being defined inside the CSS rule. If you have a multi lingual site, this tutorial would not be useful to your site.
In the CSS above, we’re going to add the ratings labels to the side of each question rather than on top so these labels need to be defined inside the CSS rule start with the .wpforms-form td:nth-of-type(1):before and just increase the number in the parentheses for each ratings you have. For example, since we have 5 ranging from Very Unsatisfied to Very Satisfied, we have to define the text for each on in the CSS rule using the pseudo class of :before.
We’ve also moved everything from columns to rows by using the display: block !important;.
And that’s it! There are multiple ways to add styling to the Likert Scale! Take a look at our tutorial on How to Customize the Likert Scale Field Table.
FAQ
Q:How can I left align my text?
A: If you’d like to left align your text, just use this complete CSS.
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { .wpforms-field-likert_scale table, .wpforms-field-likert_scale thead, .wpforms-field-likert_scale tbody, .wpforms-field-likert_scale th, .wpforms-field-likert_scale td, .wpforms-field-likert_scale tr { display: block !important; } .wpforms-field-likert_scale th { padding-left: 6px !important; font-weight: bold !important; } .wpforms-form thead tr { position: absolute !important; top: -9999px; left: -9999px; text-align: left !important; } .wpforms-field-likert_scale tr { border: 1px solid #ccc !important; } .wpforms-field-likert_scale td { border: none !important; border-bottom: 1px solid #eee !important; position: relative !important; padding-left: 50% !important; } .wpforms-field-likert_scale td:before { position: absolute !important; top: 6px !important; left: 6px !important; width: 45% !important; padding-right: 10px !important; white-space: nowrap !important; } .wpforms-field-likert_scale td:nth-of-type(1):before { content: "Very Unsatisfied"; } .wpforms-field-likert_scale td:nth-of-type(2):before { content: "Unsatisfied"; } .wpforms-field-likert_scale td:nth-of-type(3):before { content: "Neutral"; } .wpforms-field-likert_scale td:nth-of-type(4):before { content: "Satisfied"; } .wpforms-field-likert_scale td:nth-of-type(5):before { content: "Very Satisfied"; } }