WordPress.org

Ready to get started?Download WordPress

Forums

Max Magazine
[closed] Widgets overlapping in sidebar - Max Magazine (43 posts)

  1. projectperception
    Member
    Posted 1 year ago #

    When the page initially loads, the widgets on the sidebar appear to be overlapping. See here:

    http://cds.aaronkelchner.com/

    However, when you resize the window and make it smaller (so the responsive design kicks in), and then full screen the window again, the widgets are fine.

    I've found it doesn't matter which widgets I'm using, even the widgets that come with the Max Magazine template (Facebook, etc.).

    Any ideas of what could be causing it?

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Using absolute positioning is messing those up -- it's causing the Facebook widget to sit on top of the Twitter one. Try using Firebug to work with the CSS code in the area of the page.

  3. projectperception
    Member
    Posted 1 year ago #

    Thanks so much for your response!

    I've done some fiddling with it, and it appears to be something with the Max Magazine theme itself. I've mixed and matched various different widgets and it happens the same no matter what widget I use. I've also tested out the exact same widgets on different themes, and there are no overlapping issues.

    I have limited experience with CSS, and after looking into it, I've been trying to edit the #sidebar .widget section, since it seems to be universal to all widgets (as opposed to individual widgets). These are the default rules:

    #sidebar .widget{
    	padding-bottom: 20px;
    	margin-bottom:20px;
    	width:280px;
    	overflow:hidden;
    }

    There doesn't seem to be any rule telling it to be an absolute positioning. Even after adding "position: relative;" as a rule, it does nothing to change it. So, I'm assuming, there is something else I'm missing.

    It's odd that after you resize the window to make it smaller, and then resize it back to full screen, everything snaps in place just fine. I'd like it to just do that upon initial loading.

    EDIT: And of course after I said that, I thought to look at what the code looks like in Firebug once I've resized the window, but the only difference is that the "top" value for the absolute positioning changes to fit perfectly, instead of on top of each other.

    So basically, something other than the stylesheet is telling the widgets to do absolute positioning and assigning them a "top" value that I'm not quite sure how to manipulate.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It's in the HTML code here:

    <div id="max_magazine_facebook_widget-2" class="widget widget_facebook masonry-brick" style="position: absolute; top: 1106px; left: 0px;">

    Using iframes is not ideal either. Also make sure you are validating the site for errors:

    http://codex.wordpress.org/Validating_a_Website

  5. projectperception
    Member
    Posted 1 year ago #

    Thank you again for your responses, and I'll definitely be validating the website for errors.

    I saw that line when I was looking at it in Firebug, but I'm not sure how to edit that. As I said, nowhere in theme's CSS does it tell widgets to have absolute positioning (nor in the CSS of the individual widget plug-ins), so I don't know why the page is loading like that.

    Also, there are no IDs or Classes existing in the theme's stylesheet that the DIV you posted above is referencing. I'm assuming the masonry-brick is referencing jQuery Masonry, so could it have something to do with that?

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, and that would explain why it moves -- if the javascript is setting the CSS code, there can be a delay until it loads or reloads...

    But I'm not familiar with that plug-in so can't be of much specific help on that.

  7. projectperception
    Member
    Posted 1 year ago #

    Yep, I took out the Masonry JS code from the functions.php, and sure enough the problem isn't there anymore. However, it's there so that when a mobile device loads the page, the widgets at the bottom stack nice and neatly without gaps. So without Masonry, it doesn't look as nice in mobile view. At least I've narrowed it down significantly. Thanks again for all of your help WPyogi. You've pushed me in the right direction.

    Is there anyone that has worked with the Max Magazine theme and been able to fix this issue with jQuery Masonry?

  8. Sami
    Member
    Theme Author

    Posted 1 year ago #

    Sorry guys, thats problem is sometimes caused by the Masonry plugin. You can simply disbale the plugin from the functions.php (just remove the line following line from the functions.php file:

    wp_enqueue_script('masonry', get_template_directory_uri() . '/js/jquery.masonry.min.js', array('jquery'));

  9. Sami
    Member
    Theme Author

    Posted 1 year ago #

    @projectperception
    Yes, the idea was that the widgets display nicely without any gaps in the responsive view. You can perhaps include the masonry script only if its being viewed on the mobile devices.

  10. projectperception
    Member
    Posted 1 year ago #

    Thanks so much for the clarification, Sami.

    That's a good idea. I'll try only enabling it for mobile devices next. For now, I've just assigned absolute height values to each of the widgets, which seems to put everything in place correctly on Chrome, Firefox, and IE at least.

    Also, I originally tried to disable the plugin by removing that line in functions.php, but it also disabled the homepage slider. I triple checked to make sure that was the only line I removed, and after removing it all that appears is the small loading circle. Does the slider rely on anything in Masonry?

  11. Sami
    Member
    Theme Author

    Posted 1 year ago #

    No, slider does not rely on masory. Only sidebar widgets use it. Everything should work fine without masonry. You should remove its configuration settings from the js/custom.js file.
    Open custom.js file and remove this:

    jQuery('#sidebar').masonry({
    itemSelector: '.widget'
    });

    It should work. If it still does not work, let me know and I can look further.

  12. onthefresh
    Member
    Posted 1 year ago #

    I'm having the same problem but am hacking my way through this with only minimal html/css knowledge. Can you tell me where to find the custom.js file? Many thanks!

  13. onthefresh
    Member
    Posted 1 year ago #

    I've searched all of the js files in my control panel for this bit of code but cannot find it. Am I looking in the wrong spot?

  14. onthefresh
    Member
    Posted 1 year ago #

    Forget that, I found it. Such a noob, sorry! haha

  15. Super Saiya
    Member
    Posted 1 year ago #

    Hi Projectperception i want to ask u how to make the widget on Max Magazine theme not overlapping?

  16. projectperception
    Member
    Posted 1 year ago #

    The way that I worked around it was go into the CSS of the each widget and gave them a specific height value. It really only works with widgets that don't alter in size based on the content in them

    So the widgets I had trouble with were ones that come from plugins (like my Twitter and Facebook widgets and a fancier Recent Post widgets). From the Dashboard, I went to Plugins -> Editor and in the top right there is a drop down selector for the plugins to edit, and I selected the one I wanted to adjust.

    Usually a plugin has a .css file associated with it. I clicked on that, and added a "height: XXXpx;" line in the top level element of the css stylesheet. For example, my Smart Recent Posts plugin looked like this before:

    .smart_post { 
    
    width: 280px;
    
    }

    But then I added the height line, based on how large it is on the screen.

    .smart_post { 
    
    width: 280px;
    height: 650px;
    
    }

    This seems to push the widgets under it and in place. I'm sure it's not the best way to do it, but I found it to be the easiest without disabling Masonry altogether. I did this to each individual plugin widget I was using (only about 4). I hope this helped and made sense.

  17. Super Saiya
    Member
    Posted 1 year ago #

    thx...so edit every of widget right?

  18. Super Saiya
    Member
    Posted 1 year ago #

    .smart_post {

    width: 280px;

    }
    do i have to add this?

  19. projectperception
    Member
    Posted 1 year ago #

    No not that. Just this, within the { } brackets.

    height: 650px;

    Change the number based on how tall the widget is.

  20. Super Saiya
    Member
    Posted 1 year ago #

    edit it on editor?where to edit it?

  21. tommyg10
    Member
    Posted 1 year ago #

    onthefresh, i am being a noob as well, where did you find the custom js file?

    Thanks

  22. Miz.Michele
    Member
    Posted 1 year ago #

    I want to switch to this theme and have been reading to make any tweaks before activating.

    I removed the masonry from the functions. Where is the the custom js file?

    Thanks

  23. onthefresh
    Member
    Posted 1 year ago #

    I found the custom js file somewhere in my control panel in the wordpress files for the theme. I can't remember exactly, but if you look you should find it. Just removing that code completely fixed the problem for me.

  24. Miz.Michele
    Member
    Posted 1 year ago #

    @onthefresh. TX I will give it a go.

  25. Miz.Michele
    Member
    Posted 1 year ago #

    IF I disable the masonry plug-in, the sidebars are fine and widgets do not overlap but the carousel does not work. Any solutions?

  26. tomcatltd
    Member
    Posted 1 year ago #

    You have to disable both the masonry plug in, inside the functions.php file, but also the part that it connects to. That's inside the theme folder on your server. (I couldn't find it because I was using the wordpress css editor)

    If you go on your server and open up the folder with the theme in it, it'll be under wp-content/themes/max-magazine/js/custom.js

    Open custom.js and remove this:

    'jQuery('#sidebar').masonry({
    itemSelector: '.widget'
    });'

    Upload that back to your server and then delete this:

    wp_enqueue_script('masonry', get_template_directory_uri() . '/js/jquery.masonry.min.js', array('jquery'));

    from your functions.php file.
    This should solve the sidebar problem and keep your jquery stuff working.
    I kept finding parts of this solution everywhere, but for some reason there wasn't the whole thing out there all in one place. I figure the ones like me who were stumped could've been using the wordpress editor.

  27. Miz.Michele
    Member
    Posted 1 year ago #

    Thanks. I decided to not use the theme because of the way it handled images.

  28. Brad H
    Member
    Posted 1 year ago #

    Was this Resolved? I still have problems with all images overlapping on my sidebar unless there is only one and it is the very last widget in the sidebar. Anyone have any thoughts?

    site: http://www.worldcelebrationblog.com/

  29. tomcatltd
    Member
    Posted 1 year ago #

    I posted the solution on my previous post. It's what I used to solve this issue.

  30. tomcatltd
    Member
    Posted 1 year ago #

    also, don't forget to hit ctrl+f5 to refresh the page afterwards. This theme has some kind of cache issue.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.