How To Make A Responsive Full Screen Banner

Have you ever seen a really cool website and thought to yourself (with a smidge of jealousy), “I wanna do that!” but you don’t know how. Well, for those of you who are curious enough to dabble at customising your own website, keep reading… you’ll be able to scratch one of those curiosities!

It’s becoming very popular to create a full screen banner on the homepage of your website. The trick is making it responsive! Here are 3 examples of websites that apply the CSS trick I’m about to teach you…

You can spend a whole bunch of time playing around with margins, padding, pixels - or you can dive right into view height. View height is a CSS parameter that determines the height of an HTML element on your page based on the height of your browser window. In short, you can use this CSS trick to give yourself a stellar full screen homepage that is completely responsive.

All of that can be achieved in less than 30 seconds with just one line of CSS.

Here’s the code

.element {
    height: 100vh;
}

You will need to switch the .element to the correct class or id name that pertains to the banner you wish to make full screen. Then you either apply the CSS to element of that type i.e. every initial banner image on your site, or you can narrow it down by using an id to limit that CSS to one particular element in a single place on your website. You can do that as follows:

#section .element {
    height: 100vh;
}

Please feel free to use Chrome Dev Tools to inspect the websites shown above. I find that it helps me to see how other people do it, before I do it myself. I’m a visual learner!

Now I want to walk you through 2 common problems you might have when you try to implement this yourself, and how to fix them.

Problem #1
You might find that your banner has some padding or a margin around it. If that’s true, your full screen banner will actually extend beneath the bottom of the browser.

Solution #1
You add two lines of CSS to your existing code:

#section .element {
    height: 100vh;
    padding: 0;
    margin: 0;
}

You may find that after this fix, some elements on your page are in a different position than before. Don’t worry, you can apply a margin to those elements to reposition them correctly. For example, the banner text on a Squarespace website has the class .desc-wrapper.

Using following code will move your banner text into the centre of the page and make it responsive:

#section .desc-wrapper {
    margin-top: 12%;
}

Problem #2
Your banner image extends below the browser by exactly the same depth as the height of your site header. This situation may occur if you have a ‘sticky’ header.

Solution #2
To fix this problem, simply change the position of the header to fixed instead of sticky. For example:

#header {
    position: fixed;
}

Please let me know how you get on by posting in the comments. If you find yourself struggling, by all means let me know and I can help you. I am an experienced Squarespace designer and my services are available to you. It’s my business to help your business, so please do get in touch!

Peace.

PS. If you were wondering how I achieved the animation on my homepage, check out Square Studio. They offer a diverse range of plugins for Squarespace. I highly recommend them as a resource.