WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Deformed sidebar in custom 404 page (8 posts)

  1. B-Meister
    Member
    Posted 1 year ago #

    Hi,

    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 http://www.euro-match.com

  2. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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%;
    }
  3. B-Meister
    Member
    Posted 1 year ago #

    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(); ?>

  4. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    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%;
    }
  5. B-Meister
    Member
    Posted 1 year ago #

    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.

  6. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

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

    try:

    .error404 #main .widget
    {
      width: 100%;
    }
  7. B-Meister
    Member
    Posted 1 year ago #

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

  8. B-Meister
    Member
    Posted 1 year ago #

    As that did the trick, this is resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic