Blog isn't Masonry. Responsive problems.

  • Chris Borgman

    (@chrisborgman)


    11 years, 4 months ago

    Man, I love the potential of this plugin! Un-cropped images look like crap in WP’s default grid. But I’m having some issues…

    First, I did upload and activate the plugin Cleaner Gallery.

    Styling problems:

    Styling is good, looks correct on all Pages and single Posts.
    http://cb.profoliolive.com/wp-masonry/
    http://cb.profoliolive.com/vive-magazine-wp-masonry/

    I’m using Genesis and Dynamik child theme which gives the option to set any new/empty page to the Blog template, in the menu this page is called Dynamik Template Blog. When this page loads the gallery is NOT Masonry but is the default WP grid.

    As a comparison I set: Front page displays is set to Your Latests Posts. Click logo to view. When this Blog page is viewed the styling is good, looks correct.

    I don’t know what the difference is between the default WP page and the Genesis Blog template but something weird is going on. Until now I’ve never seen any difference in the two options.

    Sidebar issues:

    Something is off here, as I reduce the width of the browser the sidebar drops down under the page content. Looks like Masonry is not “seeing” the dimensions of the sidebar. Both Pages and Posts are affected.
    http://cb.profoliolive.com/wp-masonry/ Page
    http://cb.profoliolive.com/vive-magazine-wp-masonry/ Post

    All other pages/posts work fine and are completely responsive and respectthe sidebar width.
    http://cb.profoliolive.com/blog/ Dynamik Template Blog
    http://cb.profoliolive.com/ugly/ Page is using NextCellent and a custom script based on Isotoope.

    I found this page somewhere here, shows an example of Masonry and another plugin I use in the sidebar, jquery vertical accordion menu, and it’s working perfectly, no problems with the sidebar.
    http://marktang.smfa-graphicarts.net/portfolio/photography/color/
    Is there a workaround I need to know about?

    Hopefully you have an idea of what’s causing these two issues.

    Thanks so much!!

    https://ww.wp.xz.cn/plugins/jquery-masonry-image-gallery/

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author phoenixMagoo

    (@phoenixmagoo)

    11 years, 4 months ago

    Hey There!!!

    Okay, I’m guessing the Genesis issues have something to do with the gallery shortcode not appearing in the traditional WordPress content box. I’ve seen this happening with plugins and themes that are using custom editable regions vs. the organic content editor. It’s typically fixable by removing a few lines of code from one the plugins PHP files. How comfortable are you with some very minor PHP tweaks? If you are fine with them, I’ll post the instructions ASAP. Also, if it’s possible for you to link to an example of the the plugin not working that is also very helpful.

    As for your sidebar issues, it looks like Masonry does not like the sidebar container width being defined by setting up a right margin in the CSS for the main content area . Here is a link to a screenshot that shows the two CSS properties that aren’t playing well with Masonry: https://www.dropbox.com/s/3y4g39rlfzlv2ag/Screenshot%202015-01-21%2015.15.18.png?dl=0

    Ideally you should give each container it’s own width.

    Thread Starter Chris Borgman

    (@chrisborgman)

    11 years, 4 months ago

    OK, I’ll give the PHP tweak a go, thanks!!!

    What I mean by it not working is the styling is not taking hold, it doesn’t look like Masonry. It’s Genesis’ Blog template that has the styling issues: http://cb.profoliolive.com/blog/

    Sidebars, getting me dizzy! The body.content-sidebar .content If I’m not mistaken, is for the right sidebar. So, body.sidebar-content .content is for left sidebar, how I have it set up now. https://drive.google.com/file/d/0B_j_l4FBkfb3WlVsTW1nTVllTlU/view?usp=sharing I don’t know where the margin-right: 290px is from, nothing I can find is set to 290px.

    Do you think this a theme/child theme issue?

    Thread Starter Chris Borgman

    (@chrisborgman)

    11 years, 4 months ago

    http://cb.profoliolive.com/blog/ Messed up on the blog page but when you click on a Post it looks fine…

    Thread Starter Chris Borgman

    (@chrisborgman)

    11 years, 4 months ago

    Doh! I forgot to mention, the issue with the dropping down sidebars is not really an issue in Firefox. It’s not perfect, it does not respect the margin/padding between the gallery and the sidebar but right as it touches the gallery thumbs move to adapt.

    webkit issue?

    Plugin Author phoenixMagoo

    (@phoenixmagoo)

    11 years, 4 months ago

    It could totally be a webkit issue. Here is a link to a Gist with the php code that will allow the plugin to always fire: https://gist.github.com/phoenixMag00/34fdf092d5c98c9f72f0

    Replace the code in the folder: /functions/three-dot-nine.php

    I’ll look a little bit more at the sidebars when I have chance later on.

    Thanks!

    Thread Starter Chris Borgman

    (@chrisborgman)

    11 years, 4 months ago

    YES! Looks perfect in the Blog! Now, those damn pesky sidebars….

    Thanks again!

    Thread Starter Chris Borgman

    (@chrisborgman)

    11 years, 3 months ago

    Hi,

    I’m hoping that you’ve had some time to look into this Sidebar/Responsive issue I’m having. Please, any ideas??

    Again, works fine in Firefox but problems in Chrome and Safari.

    Test links:

    Masonry galleries: http://cb.profoliolive.com/category/wp-gallery/ ( sidebar drops down when resizing browser smaller)

    Non-masonry page: http://cb.profoliolive.com/another-hello-world-post/ (works as expected)

    Thank you!!

    Plugin Author phoenixMagoo

    (@phoenixmagoo)

    11 years, 3 months ago

    Hey man,

    I really think the following CSS need to be tweaked to get the column to collapse correctly:

    @media only screen and (max-width: 4000px) and (min-width: 1060px)
body.override .sidebar-primary {

     width: 234px;
     margin-top: 0px

    }`

    And

    @media only screen and (max-width: 4000px) and (min-width: 1060px)
body.content-sidebar-sidebar .sidebar-primary, body.sidebar-content-sidebar .sidebar-primary, body.content-sidebar .sidebar-primary {

     margin-left: -260px

}

    Tinkering with the width on top and the negative margin on bottom should get everything working correctly.

    Good luck!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Blog isn't Masonry. Responsive problems.’ is closed to new replies.