We do not have a built in feature for placing the Header Image and Survey Title side by side. This workaround works for most of our customers in most cases but may require some tweaking to get it right. If you have a solution that works better let us know!
If you want to place your Header Image and Survey Title side by side, you can use the following CSS code:
.sg-header-image {
display: inline-block !important;
}
.sg-title {
display: inline-block;
}
The CSS code can be added to your survey's them on the Style tab. Scroll to the bottom of the survey preview on the Style tab to access the link to the HTML/CSS Editor. Paste the CSS code on the Custom CSS tab.
If you would like to add padding around the two elements, you can use this code as a starting point:
.sg-header {
padding: 20px;
}
— Tawnee on 09/14/2015
@Jim: Hi there! Thanks for taking a peek at our documentation! One thing I would suggest is to play with the image padding:
.sg-header {
padding: 20px;
}
And then center your text. It looks like they they are centered (depending on your text size and padding options) and the title is slightly dropped as well. I would give this a shot and let us know if we can help you out this. :) Have a great day!
As always, we are happy to be of service. Have a rocking' day!
Tawnee Torres
Your Rockabilly Rebel support hero :-)
— Chris on 09/14/2015
Thanks - this is a much simpler method then the CSS code that I have been using to achieve this effect.
Question - is there a way to set the top margin of the h1 element in the sg.title? Right now the top of the graphic and the top of the title are aligned, and I would like to drop the title slightly so that it centers on the graphic.