How to Add CSS Styling to the Likert Scale for Mobile Devices

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.

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";
}

}

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";
}

}