Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #518981

    Hi. I’m having some difficulties getting a 4-column ajax portfolio to resize properly on both Chrome and Firefox. The issue is that, at certain resolutions, the 4-column layout switches to 3-columns. This switch occurs at several different screen sizes, and it doesn’t appear to be an issue related to mobile/tablet resizing, which works perfectly. Most surprising, the issue does not occur when I use Safari to view the page. Any suggestions?

    FYI, I have the following code in the quick CSS editor:
    .alternate_color #js_sort_items a.active_sort {
    color: #000000;
    }
    .sort_by_cat {
    font-size: 14px;
    display: table !important;
    margin: auto !important;
    }
    .sort_by_cat .inner_sort_button:hover {
    color: #3d71a1;
    }
    #js_sort_items .text-sep {
    color: #ffffff;
    }
    #js_sort_items {
    background-color: #ffffff!important;
    padding: 20px;
    }
    .grid-entry.flex_column {
    padding: 10px;
    }
    .sort_width_container {
    padding: 6px 10px 0px 10px;
    }
    a.grid-image {
    opacity: 1!important;
    }

    Thanks so much! It’s really a great theme.

    #519244

    Hi grechnitz,

    I could see it switching to 3 columns at some points but I couldn’t really see any issue with it, nothing was breaking or anything like that. Is this an issue only when you sit an resize your window back and forth or is it displaying wrong on differently sized screens?

    Thanks,
    Rikard

    #519385

    Rikard, hi, and thanks for responding to my query. First off, you’re absolutely right–nothing is broken, which is great from a functionality standpoint. But to answer your question, the issue occurs both when I resize and when I open the page at certain screen sizes. What’s also strange is that if I switch to a 3-column layout, the portfolio scales perfectly, so I’m confused as to why the 4-column layout has this glitch. Do you think it might have something to do with the fact that Chrome and Firefox use inline HTML5 rendering? The fact that the 4-column layout scales perfectly in Safari is really puzzling.

    #519717

    Hi,

    I’m not sure to be honest, but it seems like it’s only a minor difference between how elements are rendered in different browsers. Not sure if this is something that would require a fix though?

    Thanks,
    Rikard

    #520261

    Rikard, I do agree it’s a fairly minor thing, but for professional reason it’s very important to me that the portfolio displays properly at all resolutions, so I’d really like to understand why I’m having this issue. Why doesn’t it occur with the 4-column ajax portfolio on the Enfold demo page, for example? Even using Chrome, the Enfold demo doesn’t switch to 3 columns. Your help on this matter is greatly appreciated, Rikard.

    #520574

    Hi!

    I can reproduce the issue by resizing the browser screen to a certain width (928px to 931px). It is almost impossible to reproduce if you’re browsing the site casually. Anyway, I guess this is a little bug in the isotope script which fails to calculate the correct position of the items on certain screen width. Try to fix it with this:

    #top .no_margin.av_one_fourth {
        width: 24.9999%;
    }

    Regards,
    Ismael

    #521022

    Ismael, that did the trick! Thank you very much.

    #521322

    Hi,

    Great, glad we could help :-)

    Regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Ajax 4 Column Portfolio Resizing/Responsiveness Issue’ is closed to new replies.