Need A Little Help Creating 404 With GIF Background

Developer Support CMS Development
1

Hi folks,

There’s a custom error page that I created in my Wordpress mockup that didn’t get migrated into HubSpot :confused: 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:

custom-404-design-mgr.png
custom-404-design-mgr.png2236×1508 243 KB

And it isn’t working well at all:

custom-404-result.jpg
custom-404-result.jpg2842×1924 479 KB

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

2

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.

|300HubSpot Design / Development

Website | Contact

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

3

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?

4

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

5

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

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=4230776&tc_deviceCategory=undefined&template_layout_id=6355852508&updated=1540213793054

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.

6

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);
}

|300HubSpot Design / Development

Website | Contact

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