-
Posts
-
Hi
I believe this may be considered as a “bug” where the horizontal grid lines seem to be overlapping from the rows above / below and they do not aligned perfectly in the last row of a portfolio grid, when there are no more portfolio icons in one row.
For example, in a 4 portfolio items per row page, if the last row has only 1 item there will be 3 remaining spaces, correct? The horizontal grid line of the last logo is not aligned with the other lines. Here is a screenshot with what I am trying to say: http://dns.d.pr/3rBb/5hzrKdz6 or here, the same, but zoomed in: http://dns.d.pr/18PAJ/4tk41JiW
Hope this is clear to understand and there is a solution.
Thank you.
Hi sitesme,
Could you provide us with a link to the site in question so that we can take a closer look please?
Best regards,
RikardHi Rikard,
Please check Enfold demo which has the same problem: http://kriesi.at/themes/enfold/portfolio/portfolio-3-column/page/2/
This is the screenshot zoomed with the intersection that has the alignment problem: http://dns.d.pr/1g0Kh/RFKQZLH6
Thank you
Hi,
try this code inside of Quick CSS field:
.grid-content { padding-bottom: 17px; }and adjust as needed.
Best regards,
AndyHi Andy,
Unfortunately not. The code given is for the padding below the logo. I am talking about the lines that intersect (between logos), they are not aligned properly. Please check there: http://dns.d.pr/E4JN/3YeXcjco
Thank you
Hi Andy,
The code did not change the area I was asking for. It changed the image area padding around the logo in the grid, but nothing changed on the lines.
I am sending you this sshot: http://dns.d.pr/1bkOa/5WytPu4w
All I am asking is to have the lines even, and the 4 intersected lines perfectly aligned (which aren’t if you look closely as this sshot: http://dns.d.pr/oc0C/2kd7D8Zd )Many thanks.
Hi,
I can’t see any thicker lines. Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
AndyHi Andy,
I believe you can see the difference in the line’s thickness.
Check the green arrows pointing out to the thick lines and the orange arrows pointing out to the thinner ones.
The red arrow shows the intersection where lines are not intersecting properly: http://dns.d.pr/1d4Wx/2qE48hPYI think what happens is that when one logo grid overlaps another the line from the logo above / below overlap with each other, hence the thicker line. I am not too worried about the lines’ thickness anyway but more about the intersection (red arrow) that does not seem to be right (not aligned).
Check the URL in private.
Thank you
Hi,
The portfolio grid is using the isotope script which calculates the position of each portfolio items. Unfortunately, like any other script this is not perfect and you may find a few minor glitches like the one you discover above. Have you check this issue on different browsers? Some of the browsers will display the issue and some will not. This is because of the way different browsers deal with width values containing decimal places. You can fix the issue partially by editing the portfolio item width or the width of its parent container.
.grid-sort-container { width: 101%; }Best regards,
IsmaelHi Ismael,
Thank you for the explanation. Unfortunately, the code provided did not make any change whatsoever.
I believe that if we move down the last row by 1 pixel the problem is fixed. I am talking about the “zawya” logo.
Is there any chance the whole square / grid moves down by 1px?Thank you
In addition to the above, I just found another glitch with one vertical line between the portfolio items that is thicker than all the others.
Please check in PVT the URL and the sshot where you can see the line between the 3rd and 4th row slightly thicker than all the other lines.I tested this in 4 different browsers: Chrome, Safari, Firefox and Opera. All have both problems mentioned.
I tried this on two screen resolutions: 1920×1080 px and 1440×900 px and it applies to both of them.Many thanks if you can find a away to solve these issues.
Hi,
it looks different for me:
see private contentSo as Ismael mentioned it does not depend on the theme, but on browser and screen resolution settings. So basically nothing we can control, as every browser and every screen resolution behaves differently. I suggest to use the codes we’ve provided to you.
Let us know if you have any theme specific questions.
Best regards,
AndyHi Andy,
In my opinion this should be addressed through the theme to make it cross-compatible with most popular browsers and screen resolutions.
I can experience both problems in all 4 different browsers already mentioned and two resolutions that I was able to test.
It is not in one specific browser / resolution but multiple ones.None of the codes given earlier worked as I already mentioned.
Thank you anyway for all help and please look at the private comment asap.
Hi,
I have never heard any one else mentioning this in the forum. However, feel free to make a feature request for Kriesi here: kriesi.at/support/enfold-feature-requests/
Best regards,
Andy
- The topic ‘Portfolio Grid lines alignment’ is closed to new replies.