-
AuthorPosts
-
October 14, 2015 at 11:28 pm #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.
October 15, 2015 at 12:57 pm #519244Hi 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,
RikardOctober 15, 2015 at 4:16 pm #519385Rikard, 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.
October 16, 2015 at 8:58 am #519717Hi,
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,
RikardOctober 16, 2015 at 7:37 pm #520261Rikard, 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.
October 18, 2015 at 10:21 am #520574Hi!
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,
IsmaelOctober 19, 2015 at 3:59 pm #521022Ismael, that did the trick! Thank you very much.
October 20, 2015 at 4:20 am #521322 -
AuthorPosts
- The topic ‘Ajax 4 Column Portfolio Resizing/Responsiveness Issue’ is closed to new replies.