Still need help? Submit a support ticket.

How to Resize Logo with CSS for retina

Resizing your Logo in Canvas and Storefront

Resizing the website logo in Canvas requires a little custom CSS. Canvas will automatically make your logo size responsive. 

To avoid using custom css, upload your logo in the desired size and Canvas will honour this. 

Within custom.css or the custom CSS input field in Canvas settings you'll need to start with: 

For example: 

#logo {
width: 268px;
}

You can add any property you wish to include. A full list is available here:   http://www.w3schools.com/cssref/default.asp

2x Resolution for Retina Screens

Retina screens are becoming more common and its increasingly important to include graphics that look great at such high resolutions. 

To create a high resolution version of your logo you will need to create the image in your graphics creation software exactly twice as big as you wish your actual logo size to be. 

For example: 

I wish to set my logo to be 200px wide and 100px high. Using Photoshop (or any other graphics editor) I enlarge my logo to 400px wide and 200px high. 

I then use the following CSS to increase the resolution by halving the px size: 

#logo {
width: 200px;
}