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 a Likert Scale form field to your form. If you’re not sure how to do this, please review this documentation.

Once you add the form, you can customize this field to match the responses and ratings you’d like to have.

Viewing the form on mobile devices

When viewing the form on a smaller screen, your form would look something like this.

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;.

As you can see, our form has been altered to appear like this now on mobile devices.

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:What if I want my column text left aligned?

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

}