404 page is empty - Githubissues

StaticMania / portio-hugo

Portio Hugo is a simple, minimal and responsive Portfolio Hugo Theme. Portio Hugo is well organized, well-formatted, and named accordingly so it’s easy to change any and all of the design. Portio is built with Bootstrap 4. You can customize it very easily to fit your needs.

https://portio-hugo.staticmania.com/

MIT License

450 stars 290 forks source link

404 page is empty #41

Closed AntoineSoetewey closed 3 years ago

AntoineSoetewey commented 3 years ago

Thanks a lot for this template.

It seems to me that the 404 page is blank. Is there a reason for this?

Regards, Antoine

juhair-cupcake commented 3 years ago

Because 404 page not found. I mean, we don't have any design for 404 page. That's why It's blank.

AntoineSoetewey commented 3 years ago

ok I see, but is it possible to have at least the navbar, a text saying "404 page not found" and the footer?

juhair-cupcake commented 3 years ago

Yes, you can do that by

{{ define "main" }}
"404 page not found"
{{ end }}

AntoineSoetewey commented 3 years ago

thanks.

It's better, but the text is not appearing as on the other pages:

Screenshot 2021-08-18 at 16 32 14

Any idea on how to improve it? sorry my knowledge in coding is quite basic.

juhair-cupcake commented 3 years ago

It's better, but the text is not appearing as on the other pages:

You need add some css and little bit of Html.

{{ define "main" }}
<section>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1>
          404 page not found
        </h1>
      </div>
    </div>
  </div>
</section>
{{ end }}

Try this.

AntoineSoetewey commented 3 years ago

a little bit better :

Screenshot 2021-08-18 at 19 13 43

But the title is above the navbar

juhair-cupcake commented 3 years ago

I'm really sorry mate, I can't help you here, you have to learn some CSS SCSS and little bit of HTML. Try,

{{ define "main" }}
<section>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1 style="margin: 100px, 0px;">
          404 page not found
        </h1>
      </div>
    </div>
  </div>
</section>
{{ end }}

This code may break on mobile.

stephenajulu commented 3 years ago

Here is my implementation. It's brutal but works.

{{ define "main"}}
<div class="spacer"><br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br></div>
      <div>
        <h2 style="text-align:center;">Oops, Page Not Found!</h2>
<center><img src="images/404.svg" alt="404" width="404px" align="center" style="align:center;text-align:center;"></center>
<br>
        <h2 style="text-align:center;">
            <a href="{{ "/" | relURL }}">Go Back Home</a>
        </h2>
      </div>
{{ end }}

The image is from Undraw Illustrations, change it as you wish otherwise go to their website undraw.co and download it. I'll work on a better one later. Works on mobile too!

AntoineSoetewey commented 3 years ago

Many thanks!