Centering Image In Voice Of Customer Survey

This article is about Voice of the Customer customization.

 

Requirement

Recently, we got a business requirement to center the voice of the customer survey logo, increase the size of the logo, and remove the survey title. In this article, I am sharing the simple steps to perform the same.

 

Solution

The above requirement can be implemented by modifying the existing default theme or we can create a new theme as well. In this demo, we are going to use the default theme. We can use the following steps to implement the above requirement.

Navigate to Voice of the Customer -> Themes.

 

Open the default theme or any custom theme that you want to modify.

Navigate to CSS area and add this new code after the existing code.

 

Use the following code to remove title text and center image and increase image size. You may need to make changes in the size based on the image size. 

h1.h_t_c{ display:none !important; }   /* hide label*/
img.s_i{ max-width:100%; height:auto; width: auto; margin: auto; position: absolute;
              top: 0; left: 0; bottom: 0; right: 0;
              margin-top: 20px !important;  }  /* increase image size and replace it in center*/

After adding our code, it should look like the following.

 

Save theme changes.

Now, open any survey which is using the theme that we have modified. We should be able to see the image centered and title text removed like the following.