Need A Little Help Creating 404 With GIF Background

SOLVE
SLV
Participant

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:custom-404-design-mgr.png

 

 

And it isn't working well at all:custom-404-result.png

 

 

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

0 Upvotes
2 Accepted solutions

Accepted Solutions
Stephanie-OG
Solution
Key Advisor

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.

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

Kevin-C
Solution
Recognized Expert

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?

View solution in original post

0 Upvotes
5 Replies 5
Stephanie-OG
Solution
Key Advisor

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.

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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

View solution in original post

Kevin-C
Solution
Recognized Expert

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?

View solution in original post

0 Upvotes
SLV
Participant

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

0 Upvotes
SLV
Participant

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
Key Advisor

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

 


Stephanie O'Gay GarciaHubSpot Design / Development

Website | Contact

 

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