custom css

Help! My PNGs look fuzzy in Squarespace! Bonus: Create a down arrow with CSS.

Nothing to do with this post! Just a nice cup of coffee at my latest client's bakery.

Nothing to do with this post! Just a nice cup of coffee at my latest client's bakery.

Have you ever used a PNG image - for an icon or logo mark for instance - and wanted to tear your hair out because PNG's look so fuzzy in Squarespace? I know I have!

I have tried various methods to compound this issue:

  1. Using a large image file (1500px is always ideal in Squarespace) and spacers to make it smaller on the page. However, while this can render a decent image on larger monitors and tables, it will render a huge looking image on mobiles because Squarespace removes spacers for smaller screens. Plus, even with the spacer you can't always get the desired size.

  2. The above method is also a problem if you use it in blog posts and have AMP turned on. AMP also removes spacers so even on a desktop any images in the blog post get blown up to 100% width of the post. Not ideal at all.

  3. So what I have done for the longest time is just use a smaller image in "real time" size, e.g. anywhere between 60-100px. But while this renders a good size on mobiles it also makes the PNG look very fuzzy.

  4. Creating a wider image file with lots of transparent buffer background to the left and right of the icon or logo mark. This worked to a degree but was still not ideal as it rendered images too small on mobile and even tablet views, it required a lot of fiddling around with the file width to get it to look halfway decent on all screen sizes.

This drove me crazy. 

But I admit, I put up with this for the longest time because I just didn't know what else to do and could not find any satisfactory answers via Google or Squarespace Help, either.

Then, last week, I finally decided that I needed to find a better way. I am not a coder so any solution had to be simple and mostly doable via CSS. I asked myself:

What if I could create a class in Squarespace just for my icons and then use CSS to size and style them? Well, as it turns out, creating a new class is easy!

And that changed everything!

Fuzzy 100px PNG

Fuzzy PNG in Squarespace・Kerstin Martin Squarespace Studio

PNG using its own class and CSS

How to create crisper PNG images and icons in Squarespace

  1. Add this code to your Custom CSS:

    // Logo Mark
    .logo-mark {
       background-image: url("") !important;
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center;
       height: 150px;
  2. Upload your PNG file via the Manage Custom Files section in your Custom CSS

  3. Put your curser between the url quotation marks after background-image and then go to the custom files and select your PNG. This will place the file location URL between the quotation marks.

  4. Save your custom CSS.

  5. Go to your webpage and insert a Markdown Block in the desired location. Add this code to your Markdown Block:

    <div class="logo-mark"></div>
  6. Save your page.

  7. Go back to your custom CSS and style the PNG as desired, you can change its size for instance by using different values for the height.


You can create your own class names! So instead of logo-mark use whatever you like and make sure you use the same name in your CSS code as well. For instance:

<div class="my-png"></div>  →   .my-png   

Bonus: CSS Down Arrow Icon

You can use your own class and CSS to create a down arrow icon. I use this for instance on long scrolling indexes to indicate that there is more to read and to keep scrolling. In this case I am using two nested DIV’s, one for the arrow and the second one is the container that holds the arrow so that I can center it. You will also see some @media styling to adjust the arrow size for smaller screens.

Markdown Block:

<div class=”down-arrow-container”><div class="down-arrow"></div></div>

Custom CSS:

// Down Arrow
.down-arrow {
    border: solid hsl(208, 61%, 47%);
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
.down-arrow-container {
  text-align: center;
@media only screen and (max-width: 640px) {
  .down-arrow {
    padding: 5%;
@media only screen and (max-width: 780px) {
  .down-arrow {
    padding: 3%;

Change the border-width and padding for different icon weight and sizes.

Video Tutorial

Want more tips like these?

Squarespace 201

Take your Squarespace skills to the next level and close the gaps caused by template limitations with my advanced design tips and the CSS code I use daily in my web design business.

→ Learn More


Are you on Pinterest?

If you enjoyed this post, I'd love it if you could share it. Thank you!

How to create crisper PNG images in Squarespace・Kerstin Martin Squarespace Studio