You'll be coming across the concepts of margins and padding if you want to adjust them using CSS to give your survey or personalized PDF report a custom look. Margins and padding are not the same.
CSS is a computer language that allows you to change many elements of your design (e.g., make answers larger, make buttons out of links, etc.) that are not included in the Design tab.
The page margin is the actual value in mm between all content and the edge of the sheet. Changing the margin affects how far one element is from another element.
The padding per page is the distance between the margin and the content. Padding changes take place inside an element, and changing the padding will cause a change in how far the content is from the border.
The difference between the page margin and page padding is illustrated here:
How do I use CSS to set the margins?
When coding margins in CSS, the order of margins is: top, right, bottom, left. So if you want to specify margins of 45 pixels on the top, 60 pixels on the right, 45 pixels on the bottom, and 70 pixels on the left, here is the CSS code you would use:
p { margin: 45px 60px 45px 70px; }
You could also use the code margin: auto to center an element within its container. Note that there is not an equivalent of this type of coding for padding.
How do I use CSS to set the padding?
To adjust the padding, the CSS coding works in the same way as for margins. Simply replace the word margin with padding, so your coding may look like this:
p { padding: 15px 30px 20px 45px }
Using CSS in Pointerpro
CSS helps you recreate your company's branding entirely to make the survey or the PDF report match and will therefore enable customers to immediately identify the survey or the PDF report with your company.
There are 2 places where CSS can be uploaded - to change the format of the survey itself or to make layout adjustments to the personalized PDF report.
CSS in the survey
Head over to the Design tab and scroll down on the right-hand side to Custom CSS options. Simply click Add custom CSS file, and you'll be able to upload your CSS file from your device. For more details and lots of examples, read the Custom CSS help guide.
CSS in the PDF report
To adjust the layout of the PDF report, go to the Design tab, click on the margins and add the margins you want. If you want to remove the margins entirely, just type 0.
Another way would be to click on the Design tab and scroll down to Custom CSS. Just start typing in the CSS editor! Make sure to click Save and Test PDF when you're done to save your changes and get a preview.
Pointerpro is not only available for desktop or laptop; it’s also available on many other platforms and devices! Because of this, layouts with custom CSS can differ on other screens.
To make the survey adjustable to multiple screens, it is advised to use @media-query.
What's next?
- Create a Custom Button with HTML and add it into an outcome or the final page of your questionnaire, in order to embed a hidden hyperlink and redirect your respondents to the webpage of your choice.
- Edit Design Settings to customize your survey's design to match your company colors and identity. There are loads of different features for you to play around with. Each one works independently, so choose as many or as few as you fancy to customize your design!
- The text editor allows you to make your text more interesting by changing the font, color, size, adding emoticons and variables to personalize questions. It also allows you adjust your content with HTML. What you adjust in the survey tool is what you will see in the survey itself.