Positioning your Logo, Survey Title, and Page Title Tutorial

You can quickly alter the positioning of your logo, survey title, and page title with some quick copy and paste CSS code. In all cases, follow the steps below to make these changes.

Making changes to the Look & Feel of your survey

• Select the Advanced... tab in the Project tab > Distribute > Default Theme > Advanced
• Choose the Append radio button and add the provided CSS code (below)
• Click Save in the bottom right and Preview your survey to see the results

Ready? Time for the CSS Code

Center everything (Logo, Survey Title, Page Title)

.sg-header,h1.sg-title {
  text-align: center;
}

Center Logo Only

.sg-header {
  text-align: center;
}
h1.sg-title,.sg-page-title {
  text-align: left;
}

Center Logo and Survey Title Only

.sg-header,h1.sg-title {
  text-align: center;
}
.sg-page-title {
  text-align: center;
}

Note: When using a floating logo, make sure your survey is wide enough to support the size of your logo and titles. You can change your survey's width by increasing the number under Project> Distribute > Default Theme >  Options > Survey Width (default: 600px)

Float Logo to the Left, Place Titles to the Right (not IE6 compatible)

.sg-header-image {
  float: left;
  padding-left: 10px;
}
h1.sg-title,.sg-page-title {
  text-align: right;
}

Have questions? Want to comment on this? Join the discussion on our SurveyGizmo Support site.