1. Simply add a logo at twice the size to your Show Site Setup area and add the following snippet to your custom CSS area.



2. Determine the actual size of the logo you would like to be displayed and place within the custom CSS area as follows ( Height and width numbers are based on half the size of your actual image. For instance, the image being dropped throughout the preview site is 232px by 218px ):


a#logo img {
width: 116px;
height: 109px;
}

3. If you would like to add "spacing" at the top of your image, you may add the following in addition to your logo sizing:

a#logo img {
width: 116px;
height: 109px;
margin-top: 70px;
}

4. If you would like to reduce the amount of margin on mobile devices as a result of a smaller header height, you may use the following:

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 768px) {

a#logo img {
margin-top: 0;
}

}

/* Mobile Portrait (devices and browsers) */
@media only screen and (max-width: 480px) {

a#logo img {
margin-top: 0;
}
}



*** Height and width numbers are based on half the size of your actual image. For instance, the image being dropped throughout the preview site is 232px by 218px.