-
Posts
-
Hi,
I saw a couple of older posts with this problem, but could not find a solution.
Problem: In portfolio grid, most images are cropped correctly, but some are longer or shorter. Width seems to be correct in all items. Tried to remove item picture and put it in again, no change.Wordpress 4.9.8
Enfold 4.4.1Hey videotonart,
Could you post a link to the page in question so that we can take a closer look please?
Best regards,
RikardHi videotonart,
You can upload a screenshot to a service like Dropbox and give us the link here, but in many cases, we need to see the actual html and css to be able to offer a solution.
If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
I understand. Then this will have to wait till the site goes live in a couple of days. I will send you a link shortly.
Best regards,
Carl.Hi Carl,
Sure, please let us know where and when we can check. Will keep this open for now.
Best regards,
VictoriaHi,
Thank you for the info. You have to make sure that the original image is larger than 495x400px. That is the minimum size of the “portfolio” thumbnail. Looks like you’re using images that are smaller than the default size, which makes the grid inconsistent. (see private field)
Best regards,
Ismaelok, thanks, I’ll look into that.
Another thing I noticed is that in the Firefox browser, only 5 rows are displayed, versus 6 in other browsers, as set in preferences.
Best regards,
Carl.Hi videotonart,
It shows 6 and then jumps to showing 5.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi Victoria,
it seems like it has something to do with the extra spacing I want between the portfolio items.
This extra spacing however only works when I put it in a 1/1 element.I used this code in Quick CSS: (from another support inquiry on your site)
.grid-entry .inner-entry { margin-right: 20px; }So there seem to be 3 issues:
1. CSS customization only seems to work when put in 1/1 container
2. in FF flips from 6 columns to 5
3. when in 1/1 container, there is 1px space left and right of the middle item, which is not nice.Can you please look at that again?
Thanks,
Carl.Maybe the white stripes are because of the pictures not having the right resolution.
Let me first fix the images and let’s then look at the remaining problems.Hi,
The grid is more consistent when the “portfolio_small” thumbnail size is selected. You have to upload a larger image if you want to select a larger thumbnail size.
Best regards,
IsmaelThanks Ismael, switching the thumbnail size solved most of the problems. Thanks also for great support in general.
A few issues remain for me:
1. layout/colums switching
This remains a problem. When I resize the width in Firefox to the smallest size, I get one column, thats fine. Then I increase the width. At some point the switch is made to a two-column layout. EXCEPT for the first item which occupies the whole width. This is not good. Increasing width further, we get three columns, fine. Increasing further, we get six columns, great! But then when I increase the width further, it jumps back to five columns. When I do the same thing in Safari, everything is good, EXCEPT the two-column-layout which also has the first picture occupying the first row completely. Same thing on iPhone sideways.The 5-6 column switching I can work around by setting the layout to 5 columns. It’s ok for me.
The bug in the two-column view I find not acceptable. Is there something you can do about that?2. spacing between items
The space between items is not consistent with the standard settings. Sometimes the pictures are exactly adjacent to each other, sometimes there is a narrow white space in between them.As a workaround, I made a 20 pixel margin between them as I posted earlier, and that fixes that.
3. size of the text field under thumbnails
The size is consistent as long as there is only one line everywhere. With different screen sizes however, it can be that some items have two lines of text, and others one. They appear with different sizes of the text field which breaks the evenness of the grid. Ideally all fields should be equal to the biggest field in a row. Is there anything that can be done about that?Thanks!
Carl.
PS.: for who wants to look at the website, the URL is videotonart.de under “portfolio”.
Hi,
1.) You can use this css code to prevent items with odd index from taking the full width of the container on certain screen sizes.
@media only screen and (max-width: 767px) and (min-width: 480px) { .responsive #top #wrap_all .grid-sort-container.grid-total-odd .grid-entry.grid-loop-1 { width: 50%; } }2.) I think it’s because of the pixel density and due to the fact that the width is percentage based. Unfortunately, we can’t do much about it aside from defining actual spaces between the items.
3.) You can set a minimum height to the grid content container.
.grid-content { padding: 20px; position: relative; min-height: 68px; }You may need to adjust the minimum height value on certain screen sizes.
Best regards,
Ismael
- You must be logged in to reply to this topic.