Haven Blog

Have you wondered what you can do with the "Custom CSS" box in your Haven's settings? The custom CSS help page on your Haven describes changing colors or using different fonts, but you can use CSS to change almost any part of how your Haven looks. In this post, we're going to describe how to make full-bleed images that go from edge to edge.

Normally, when you upload an image on your Haven, it might look something like this:

Photo by Kiana Bosman on Unsplash

To make the image stretch all the way to the edge, add the following custom CSS in your Haven's settings:

img {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
}

Now your image will stretch edge to edge like this:

Quick note: you're reading this on a feed reader (which is great), but it means you wont see the effect of the edge to edge styling in the image below.

Photo by Kiana Bosman on Unsplash

The img selector at the top means this CSS will apply to all images on your Haven. If you only want some images to show up this way, you can use a more specific selector. Change img to img.fullbleed in the first line of your custom CSS. Then you'll have to specify a CSS class on any image you want displayed full-bleed.

When you upload an image to your Haven, it creates the HTML image code for you. It will look something like this:

<a href="/images/raw/123/cute_kid.jpg">
  <img src="/images/resized/123/cute_kid.jpg"></img>
</a>

The <img src=... line shows the actual image on your page, that's where you can add a CSS class. Since you named the selector img.fullbleed, add the fullbleed class in the HTML code. The section will look like this:

<a href="/images/raw/123/cute_kid.jpg">
  <img class="fullbleed" src="/images/resized/123/cute_kid.jpg"></img>
</a>

This is just one example of what you can do with the Custom CSS on your Haven to make it look the way you want it to look. Expect to see some other tips and tricks here in the future!