-
Posts
-
hello, those 4 images in the gallery looked alright in a gallery where i have chosen portfolio (495×400).
but on a mobile there are not lining. Probably because the thumbs are not all exactly 495×400, but just a little different from eachother.https://jmcwebdesign.nl/wp-content/uploads/2021/03/Screenshot_20210323-102734_Chrome.jpg
what to make them line on a mobile? (or sometimes also on a pc)
Enfold is a great theme, but the gallery thumbnails is always an issue.
For example: to resovle the problem above i choose 180×180 again, because thats the only choice the thumbs wil line and not skip.
As soon as i choose 300×300 they are square but not lining, and as soon i choose Portfolio 495×400 there is the same problem.
(NB: disadvantage of 180×180 compared to 300×300 is that 180 x 180 is more vague, not so sharp , if you have for example only a row of two pics).It might have something to do with the original sizes of the images , but why cant this be detached from each other?
Let the thumbs be exaclty the size in the options list – let it crop the pic how much it wants.In that way it will always line.
Whatever youll see once youve clicked on it/whatever the size of the big pic is – small, big, rectangle, square – doesnt matter.
Why is the thumb-sizes not what they promise to be in the options list?best regards, jelle
Hey jelle,
I can’t reproduce the results shown in your screenshot on my end using Chrome, could you let us know exactly how to reproduce the problem please?
Best regards,
Rikardhello rikard, i had put back the 180×180 for its a website of a client..
but now ive put it back on 495×400:if you ll watch it on your mobile you will see the skipping:
https://jmcwebdesign.nl/wp-content/uploads/2021/03/Screenshot_20210323-102734_Chrome.jpgbest regards, jelle
Hi,
Add this to quick css:
@media only screen and (max-width: 767px) { #top #wrap_all .avia-gallery .avia-gallery-thumb a { float: left; display: inline-table!important; }}Best regards,
Jordan Shannonhello jordan, thanks but there is no result:
https://jmcwebdesign.nl/wp-content/uploads/2021/03/Screenshot_20210323-102734_Chrome.jpg
they are still skipping on the mobile phone
the problem never has been that the 495×400 was not working on this page, they do on a pc,
the problem was that 495×400 is not lining on this page on a mobile .but in extension of this story: in general only the 180×180 gallery thumbs always do the job. As soon as one chooses 300×300 or 495 x 400 the problems start.
please see my first text – #1289829 – in this ticket where i explain.best regards, jelle
Just thought I would add this seems to the the same (or related) issue I have also reported: https://kriesi.at/support/topic/gallery-thumbnail-layout-issue-on-chromium-based-browsers/
Hoping Enfold can work out the cause soon.
hello THP, thanks for the support.
It helped me on the way. In fact :495×400
in the tikcet
#1256650
of ariane 1001
there was this piece of code that did the job for 495×400. Now they finally line out in a proper way on a mobile.avia-gallery-thumb {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}result:
https://jmcwebdesign.nl/wp-content/uploads/2021/04/Screenshot_20210401-073743_Chrome.jpg300×300
i also tried to get a result on 300×300 but this is still not working.
if you ‘d choose 180×180 its cropped and nicely displayed, but one way or another there seems to be other rules for 300×300,
as they are not cropped.result:
https://jmcwebdesign.nl/wp-content/uploads/2021/04/Screenshot_20210401-074159_Chrome.jpgEnfold, would it be possible to crop the 300×300 the same way as the 180×180
so one gets nice little sharp square thumbs?best regards, jelle
Hi,
Enfold, would it be possible to crop the 300×300 the same way as the 180×180
That is a default thumbnail called “medium”, and you can adjust its dimension in the Settings > Media library panel, but you will need a third party plugin to enable cropping. You can use the following plugin to set the crop parameter of the thumbnail to true.
// https://wordpress.org/plugins/simple-image-sizes/
Best regards,
Ismaelhi ismael, thanks
ive installed the plugin, made my own 300×300 dimension and there is some improvement.to challenge it ive used 1 really vertical image and 3 rather normal images.
ive regenerated the 300×300 and the 707×705.
in the 705×705 the challeging very vertical image is spoiling it, as this is the one that refuses to be square.
see the results here below…but in the 300×300 its alright…cant explain why…
the 300×300 has cropped, but the 705×705 has not.you can see the page below and also an overview ive made of 3 different dimensions and below it the result it gave.
Even if the 705×705 still wont crop, im satisfied with the 300×300 result, so as far as im concerned you can close this ticket.
best regards, jellehttps://jmcwebdesign.nl/wp-content/uploads/2021/04/thumbs.jpg
Hi,
Thank you for the update.
in the 705×705 the challeging very vertical image is spoiling it, as this is the one that refuses to be square.
It is possible that the image that is being uploaded is not wider than the specified thumbnail dimension (705x705px), so WP does not crop the image because it does not have to. Please note that WordPress will not automatically increase the size of the uploaded image to match the specified thumbnail size. You will either have to upload a wider or taller image, or adjust the size of the 705x705px thumbnai.
Best regards,
Ismaelhello ismael, oke, thanks for the extra info.
Ill have a look at it later on.
For now, you can close this ticket.
best regards, jelle
- The topic ‘images in gallery on mobile not in line’ is closed to new replies.