Fixing Sidebar Overlap in Max-Magazine by Gazpo

For weeks now I’ve been struggling with this theme from Gazpo, Max-Magazine.  It’s free, but that doesn’t mean it should be broken.

Images Overlap in Sidebar of Max-Magazine Theme

I’ve tried installing and uninstalling, deleting and reactivating various sidebar widgets, to no avail.  The pictures still overlapped.

Ugh.

Instead of continuing to bang my head against the wall thinking I could figure it out on my own (or figuring that it was just permanently and inherently broken), I went straight to the source.

Now for some of you more experienced WordPress developers, this might have been a no-brainer.  But for me, it was a challenge.

Here’s the fix I found, straight from the forum discussion about this particular theme:

Disable the call to masonry.js within the functions.php file.  Seriously?  Why is this even being called when it’s not necessary?  Doesn’t make sense.

And here’s what that looked like for me:

I edited the file in TextWrangler (free for Mac and Windows).  Take a look at line number 258.  The /* and */ signal to the php processor that everything within these symbols are to be ignored.

Remove Masonry in Functions for Max-Magazine Theme

 

Add these to your functions.php file (in directory /wp-content/themes/max-magazine), save, and upload.  Refresh your cache if using something like W3 Total Cache, and revisit your website.  You should see the fix as demonstrated below.

Sidebar fixed in Max-Magazine Theme

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

So that’s how you solve the sidebar overlap issue in the Max-Magazine theme from Gazpo.

Many thanks to the theme forum moderator Sami for sharing this tip with us.

What other fixes have you uncovered?  What themes do you have installed?  What are you favorite themes that you want to recommend to other readers?  I appreciate you taking time to share.

Looking to learn more about web design?  Check out the following resources:

HTML and CSS: Design and Build WEbsites

  • Tamara Munoz

    This fix worked great, but it caused the slider on the Home Page to stop working/loading. Did you experience this problem?

    • PaulSidwell

      Tamara-
      good question. I don’t use the slider on the home page with this theme. Since the masonry.js file is what controls the slider, disabling it overall will certainly break that functionality.
      A solution you might try is creating a second instance of the functions.php file and renaming it ‘functions_extended’ or something similar. Then allow the masonry.js file, and direct the slider to the new copy of ‘functions_extended’.
      I haven’t tried this on any sites yet, but it should work after some trial and error. Make sure you track the changes as you make them, so you can undo them later if necessary.
      Let us know how this works for you.
      Thanks for stopping by!

  • PaulSidwell

    Tamara-

    good question. I don’t use the slider on the home page with this theme.

    Since the masonry.js file is what controls the slider, disabling it overall will certainly break that functionality.

    A solution you might try is creating a second instance of the functions.php file and renaming it ‘functions_extended’ or something similar. Then allow the masonry.js file, and direct the slider to the new copy of ‘functions_extended’.

    I haven’t tried this on any sites yet, but it should work after some trial and error. Make sure you track the changes as you make them, so you can undo them later if necessary.

    Let us know how this works for you.

    Thanks for stopping by!

  • http://www.facebook.com/kayley.caroline Kayley Wagner

    Thanks! I’ll keep this in mind when I start working on the sidebar. Only one note: shouldn’t you place the js functionality within a child theme’s functions.php file? Otherwise, it will get overwritten on the next theme update.

    • http://www.sidwellstudios.com/ Paul Sidwell

      Yep, you’re totally correct. I’m just learning about putting child themes to work (they’ve given me trouble in the past). Any tips you can pass along would be great. Thanks for reading!

      • Ida

        I have done a childtheme for max-magazine and found out that the styles could not be imported to the childtheme for safari 5 and lower versions. do you have the same problem? my solution was to put all the styles in my child styles.css

        • http://www.sidwellstudios.com/ Paul Sidwell

          Ida,

          Thanks for stopping by. It seems like you solved your challenge, is that correct?

          Also, I’m curious why you’re still using Safari 5 when version 6+ is already available. I understand it could be a corporate thing, but outside of that there’s usually no reason to stay behind when newer technologies are free to upgrade.

          • Ida

            yes, I solved the problem. but Im still curious about why @import did not work? may be it was the relative path?. Actually I dont use safari, it was one om the member on the site who used safari 4 and detected the problem. the I found out that safari 5 not could load the style.

          • http://www.sidwellstudios.com/ Paul Sidwell

            I don’t know for sure. I never use relative paths; it’s just too easy to replace all relative paths with absolute paths. Plus, using relative paths makes it SUPER easy for scrapers to copy your website bit-for-bit, which hurts your SEO.

          • Ida

            yepp you are right, thank you for considering the seo problem with absolute paths. I have tested it again and yesterday I found out that it must have been the lack of semicolon that caused the style error…

          • http://www.sidwellstudios.com/ Paul Sidwell

            You’re welcome. It doesn’t take much work to ‘Find and Replace’ all paths with an absolute path.

            To find errors, I use online validators. There are many free ones, and my favorite is from the W3C (World Wide Web Consortium).

            HTML Validator: http://validator.w3.org/
            CSS Validator: http://jigsaw.w3.org/css-validator/

  • Kebekbayev Almas

    So, did anyone try to solve the issues with a slider by disabling masonry.js?

  • http://gazpo.com Sami

    Hi Guys !
    Great to see this article. I’m the author of the theme. Sorry, I havn’t been much active lately. Have you managed to fix everything already?

    • http://www.sidwellstudios.com/ Paul Sidwell

      Sami, I wrote this just as a tutorial for those experiencing the same problem. It seems to have helped a lot of people. I keep an eye on the forums and try to help anybody with this issue, along with some others. Cheers!

      • http://gazpo.com Sami

        Yes, I noticed that already. Thank you very much for taking your time to help others. :)

  • Wenfa

    Hi Sami, Paul, and the forum community,

    I have found the solution of this sidebar overlapping issue. And I believe it is worth to share. You will have your sidebar overlapping issue solved by not causing any problem to the slider on the front page.

    Here is the solution:

    Open your style.css and find “widget ul li” in Sidebar section, and you will see something as shown below:

    .widget ul li {
    background: url(“images/arrow-sidebar.png”) no-repeat left 9px;
    border-bottom: 1px dotted #E7E7E7;
    color: #444444;
    margin: 0;
    overflow: hidden;
    padding: 6px 15px;
    }

    Then what you need to do is just add “position: relative” right below “padding: 6px 15px;”

    And here is what you should see after editing it.

    .widget ul li {
    background: url(“images/arrow-sidebar.png”) no-repeat left 9px;
    border-bottom: 1px dotted #E7E7E7;
    color: #444444;
    margin: 0;
    overflow: hidden;
    padding: 6px 15px;
    position: relative;
    }

  • onefemalecanuck

    Hi Paul, Sami & all,

    I am completely useless with html, but this fix solved my issue re the overlapping problem.

    Unfortunately, as soon as that was fixed with the /* */, one of my 4 featured categories…fell down. When you go to my front page (http://www.onefemalecanuck.com/), scroll down just a little bit and you will notice that the bottom left featured category of ‘The Funnies’ is suddenly beneath the other three.

    Can you please help? And if possible, because I really really don’t know anything please provide instructions as though you are speaking with a child.

    Thank you very much!

    • http://www.sidwellstudios.com/ Paul Sidwell

      Maha-

      Looking at your css, it looks like your categories are of varying height, causing the displacement. What I mean by that is this: even though your category sections (especially ‘know it all’ and ‘mindful living’) BEGIN at the same space on the page, they don’t END at the same space. That pushes the elements that follow (categories of ‘mindful relationships’ and ‘the funnies’) to be out of order, vertically speaking.

      It looks like your css needs some custom work. Nice blog!

      Paul Sidwell

      • onefemalecanuck

        Thanks Paul! Lovely of you to say.

        And thank you also for speaking in such clear language :)

        I think I fixed it!! Take a peek – all I did was place a the letters br between the sharp brackets to create a break before the titles of the articles in the Mindful Living section. My logic was that the reason the categories were uneven is because the Know-It-All category titles are each two lines, whereas the Mindful Living category titles are all one each.

        This is sort of a lame fix, but I’ll take it.

        Salaam your way (<3 Jesus, peace and blessings upon him; love that it is in your bio :) )

        Maha