Support » Themes and Templates » Deformed sidebar in custom 404 page

  • Resolved B-Meister



    I have made a custom theme (based on twenty eleven).
    In this theme I also slightly customized the sidebar. It’s working perfectly in all my normal pages, but in the 404 page my sidebar is displaying wrong.
    It’s in the right place, but the widgets in the sidebar somehow overlap (instead of the widgets being vertically aligned, they are now placed horizontally, which makes them overlap).
    I’ve tried many things, but none seems to work.
    I am a novice at making websites, so it could be it’s very easy to someone else, but as I said, I can’t find my mistake. I have learnt some basic HTML, PHP and CSS along the way, but obviously not enough.

    I hope anyone can help me solve this problem, because I’m really stuck here.

    The website is

Viewing 7 replies - 1 through 7 (of 7 total)
  • Michael


    Forum Moderator

    what is the full code of 404.php in your child theme?

    i.e. how have you integrated the sidebar into that template?

    possibly css fix:

    .error404 #primary #content #secondary {
    	margin-right: 5.6%;

    First of all, thanks very much for your early reply!
    I pasted the full code below, which is the code copied from the twenty eleven theme’s 404.php, only edited so that there’s only text, no links and stuff.
    I tried your possible CSS fix, which didn’t work unfortunately.
    I already tried something similar, which (obviously) also didn’t work.

    Here’s the code I used in my 404.php file

    get_header(); ?>
    <div id=”primary”>
    <div id=”content” role=”main”>
    <?php get_sidebar(); ?>
    <div class=”entry-content”>
    <p><?php _e( ‘Unfortunately this page does not exist, or has been removed.<p>Please go back to the homepage to find what you’re looking for.’, ‘mytheme’ ); ?></p>

    </div><!– .entry-content –>
    </div><!– #content –>
    </div><!– #primary –>

    <?php get_footer(); ?>



    Forum Moderator

    it might have worked – possibly try and clear the browser cache – press ‘reload’ or ‘ctrl f5’ …

    or try and move this line <?php get_sidebar(); ?> to just before <?php get_footer(); ?>

    and edit the style of:

    .error404 #primary #content {
    	margin-left: 35%;

    Yes, I knew I had to refresh the page. I do understand you had to ask though.
    All it did was move the text to the lower left of the page, but the sidebar remained the same.

    I’ll try what you said last, but at the moment I’m not at home.
    Thanks again anyway, I appreciate your help.



    Forum Moderator

    my mistake – I was looking at the overlap of the content and sidebar;


    .error404 #main .widget
      width: 100%;

    Yes! That did it.
    You sir, are awesome. 🙂 Thank you very much!

    As that did the trick, this is resolved.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Deformed sidebar in custom 404 page’ is closed to new replies.