Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 21, 2018 at 10:44 pm #1024611
    timahe

    Hi guys,

    working with a customer on a new site. On the gallery element I am experiencing a big problem: the big image is much too high. I have configured it to be smaller but it did not work. Also tried a css which I find in forums:

    #top div .avia-gallery .avia-gallery-big-no-crop-thumb {
    height: auto !important;
}

    DId not work. Here are my settings:
    https://imgur.com/a/wPyerfN
    Seems they do not take any effect as the image does not get smaller by changing them..

    I added the link to the website in private content

    October 22, 2018 at 5:38 pm #1025012
    Victoria

    Hey Tima,

    Well, if the container for the images is going to be less in height, the image will have to scale and it will not cover the whole container.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top div .avia-gallery .avia-gallery-big-no-crop-thumb {
    height: 560px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 22, 2018 at 7:29 pm #1025068
    timahe

    Hi Victoria,

    thanks – I can work with this. Still got some questions.
    1. Is it possible to use % here so it will be responsive? Or is it already?
    2. I understand the images scale down and will not fill the container anymore. But actually it seems they scale down and also lose quality? If you visit the site mentioned above, for example I added a 6000×4000 picture with 2mb which has normally good quality. Now the quality is very bed, you can also see once it scales down when the image was changed. How can we fix this? What we actually want is a gallery similiar like its done here: https://imgur.com/a/kasphvZ

    Thanks!

    October 23, 2018 at 8:17 pm #1025597
    Victoria

    Hi timahe,

    Well, you can try using % but it might not work.

    Best regards,
    Victoria

    October 23, 2018 at 10:22 pm #1025657
    timahe

    Hi Vitoria,

    thanks for the infos.
    1. To what and how exactly should I change the %? I am just worrying if it will be not responsive with the exact value…
    2. For the settings you sent: to what values should I exactly change them?

    Thanks!!

    October 24, 2018 at 6:25 pm #1026037
    Victoria

    Hi timahe,

    The upper one that crops thumbs at 80px and uncheck the checkbox.

    Well, you can play with the % value and work out the one that works better for you.

    Best regards,
    Victoria

    October 25, 2018 at 10:01 pm #1026573
    timahe

    Hi Victoria,

    I edited the settings as you mentioned but – even after cleaning cache – it took no effect. Pictures are still shown in really bad quality even if they have good quality in its origin…

    Thanks in advance!

    October 25, 2018 at 10:12 pm #1026576
    timahe

    I also tried
    #top div .avia-gallery .avia-gallery-big-no-crop-thumb {
    height: 50% !important;
    }
    But it did not take any effect. Did I do anything wrong?

    October 26, 2018 at 3:00 pm #1026815
    Victoria

    Hi timahe,

    I adjusted these settings for you and now the images are sharp
    Image 2018-10-26 at 15.58.42.png

    If you need further assistance please let us know.
    Best regards,
    Victoria

    October 26, 2018 at 3:58 pm #1026862
    timahe

    Hi Victoria,

    first of all thanks for your patience and expertice!
    Actually yes I will need finally assistance in one more problem:
    As I described actually the gallery height on my desktop is too much. Its not possible to see the whole picture and the thumbnails below in one screen (I am using Macbook with 4k resolution). Thats why you gave me the CSS. But since fixed pixel will not be responsive as far as I know I tried it with the % in CSS:

    #top div .avia-gallery .avia-gallery-big-no-crop-thumb {
height: 50% !important;
}

    Actually this did not take any effect. So what to do now to get the gallery height lower in a responsive way / working for all devices?

    Thanks!!

    October 29, 2018 at 4:05 pm #1027609
    timahe

    ??

    October 30, 2018 at 4:11 am #1027832
    Ismael

    Hi,

    Sorry for the late response.

    Have you tried using css media queries to adjust the height of the gallery on different screen sizes?

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
#top div .avia-gallery .avia-gallery-big-no-crop-thumb {
   height: 200px !important;
}
}

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
#top div .avia-gallery .avia-gallery-big-no-crop-thumb {
   height: 150px !important;
}
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.