# Customize the 404 page ("Oops! That page doesn't exist or is private")

**URL:** https://meta.discourse.org/t/customize-the-404-page-oops-that-page-doesnt-exist-or-is-private/68017
**Category:** Developers
**Tags:** how-to
**Created:** [August 14, 2017, 2:31pm UTC](https://meta.discourse.org/t/customize-the-404-page-oops-that-page-doesnt-exist-or-is-private/68017 "2017-08-14T14:31:52Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [August 14, 2017, 2:31pm UTC](https://meta.discourse.org/t/customize-the-404-page-oops-that-page-doesnt-exist-or-is-private/68017/1 "2017-08-14T14:31:52Z")

</div>

## Before:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/8/9/28907866234e8c1f7149db8eab434d717fdb9272.png)

## After (categories on the right):

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/c/61cc8179485546def229b9fac4318fa09ed52d4d.png)

## Or categories on the left:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/7/b/37bb37b3589a73701298cc26a7efc022a109ef99.png)

- page width increased
- buttons and google search are always visible
- categories aligned on the right (or left)
- topics title cut if too long
- added the content “Are you logged in?” as described [here](https://meta.discourse.org/t/coloured-category-boxes-on-oops-page-404/67977)
- tested only for desktop (not mobile)

> Note: the code it’s still a work in progress!

Here the CSS I used:

```plaintext
/*-----------
GENERAL CSS
-----------*/

.span8 {
    width: 480px;
}

/*Categories aligned to topics title based on their styles*/

.not-found-topic a.badge-wrapper.box {top: 0px;}
.not-found-topic a.badge-wrapper.bullet, .not-found-topic a.badge-wrapper.bar {top: 7px;}
.not-found-topic a.badge-wrapper.none {top: 3px;}

/*Categories max width*/

.page-not-found-topics a.badge-wrapper {max-width: 100px;}

/*If topic titles are too long they will be cut off */

.not-found-topic > a {
    float: left; 
    max-width: 75%;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
}

/*Repositioning the "More" buttons*/

.span8 .btn {margin: 10px 65px 0px 0px;}

/*More margin top to Popular and Recent titles*/

h2.popular-topics-title, h2.recent-topics-title, .page-not-found-search h2 {margin-top: 6px;} 

/*----------------------------------------------
SMARTPHONES,IPAD AND BIG SCREENS MEDIA QUERIES
----------------------------------------------*/

@media only screen 
and (min-device-width : 320px)
and (max-device-width : 479px) {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 65% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}
}

@media only screen 
and (min-device-width : 480px)
and (max-device-width : 599px) {
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 70% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 600px)
and (max-device-width : 799px){
    .not-found-topic > a {max-width: 95%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}
    .not-found-topic:nth-of-type(1n+6) {display: none;}

}

@media only screen 
and (min-device-width : 800px) {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 100%;}
    .span8 .btn {margin: 2% 80% 0% 0%;}   
}

@media only screen 
and (min-device-width : 1023px) {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}

@media only screen 
and (min-device-width : 1440px)
and (min-device-width : 1600px) {
    .not-found-topic > a {max-width: 75%;}
    .span8 {width: 480px;}
}

```