Need A Little Help Creating 404 With GIF Background

[SLV]

Hi folks,

There's a custom error page that I created in my Wordpress mockup that didn't get migrated into HubSpot 😕 I think it's fairly simple, but it's apparently something I need a little assistance with.

Here's what I'm trying to create:

http://slv.ajdesignco.com/templates/custom-404/

This is what I have so far in the design manager:

And it isn't working well at all:

It's not a HUGE priority, but I would love to have this little "easter egg" feature added to our new HubSpot site. Am I close? Can anyone bump me in the right direction?

Thanks,

Andy

[Stephanie-OG · Accepted solution]

Hi Andy, 

Try also adding in the following to your inline styling: 

min-height: 100vh;

This should set the height to at least the window height. 

If that doesn't work, click on Preview > Preview without display options and send us that link so that we can take a look.

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[Stephanie-OG · Accepted solution]

Hi Andy, 

Try also adding in the following to your inline styling: 

min-height: 100vh;

This should set the height to at least the window height. 

If that doesn't work, click on Preview > Preview without display options and send us that link so that we can take a look.

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[SLV]

Hi Stephanie, that helped! Here's the result:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Let me know if that link doesn't work for you.

Also, I figured out why the CSS wasn't styling my content...I hadn't linked the stylesheets. And once I linked the stylesheets, I saw some conflicts. So I made a copy of my main stylesheet and created a derivative for just this error page. I also edited the GIF in the background so it's darker and allows the text to be clearly seen. I couldn't get a CSS overlay to work.

I think the look is about right. All I need to do configure this so it's used as the main 404 error page. If you have any other suggestions, please let me know. 

[Stephanie-OG]

That seems to work! It works on IE/Firefox/Chrome at different sizes so I don't think there should be any issues. 

Aside from darkening the GIF, one thing I often do is add some text-shadow. Not loads but a subtle amount that helps the text stand out. Something like: 

h1 {
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

---

HubSpot Design / Development

Website | Contact

If this helped, please mark it as the solution to your question, thanks!

[Kevin-C · Accepted solution]

This will absolutely work, but might I add another suggestion?

The parent div (module-group) is not resepecting the height of its children elements because they are floated columns. applying the Clearfix hack to the parent divs might achieve the desired look in a way that won't push the footer out of view on larger displays.

Thoughts?

[SLV]

Thanks Kevin! I actually don't mind the footer being pushed out of view. But I may indeed need to implement the clearfix hack.