#76655 images size in widget images layout

Landing Forums JupiterX WordPress Theme images size in widget images layout

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • vero.laban-598c5e41

    Hello,
    I’m coming back to you to ask for your precious help once again.I created a logo gallery with the “Image layout” widget on the https://nouveau.comite-richelieu.org/partenaires/ page.

    Could you tell me how to make it so that:
    – the logos appear in full, but the tallest ones are no more than 150px high…
    – and the boxes containing the logos should be the same height…

    Thank you in advance!

    Nodari Support Team

    Hey there

    you can use this css code:

    .jet-images-layout.layout-type-grid .jet-images-layout__image-instance {
    -o-object-fit: contain;
    object-fit: contain;
    }

    vero.laban-598c5e41

    Hello and thank you very much for your prompt response!
    Your code works very well.

    I have another request regarding this widget, I would like to modify its responsive behavior.
    Below 1024 px, the widget goes from 4 to 1 column. I would like it to be 3 columns in tablet format and 2 columns in smartphone format.
    I added this code :
    @media (min-width: 768px)
    .col-desk-4 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33%!important;
    -ms-flex: 0 0 33%!important;
    flex: 0 0 33%!important;
    max-width: 33%!important;
    }

    but it doesn’t work…
    Could you help me?
    Thank you in advance.

    Nodari Support Team

    Hey there

    Ok, please try this code instead:

    .jet-images-layout__list {
        display: block !important;
    }
    @media (min-width: 1024px){
    .jet-images-layout__item.col-desk-4.image-loaded {
        width: 33%;
        float: left;
    }
    }
    @media (min-width: 768px){
    .jet-images-layout__item.col-desk-4.image-loaded {
        width: 50%;
        float: left;
    }
    }

    Let me know if it worked 🙂

    vero.laban-598c5e41

    Thank you for your answer, I copy the code you gave me but it does not work…

    Nodari Support Team

    HI

    Sorry about that, please change code to this:

    .jet-images-layout__list {
        display: block !important;
    }
    @media (max-width: 1024px){
    .jet-images-layout__item.col-desk-4.image-loaded {
        width: 33%;
        float: left;
    }
    }
    @media (max-width: 768px){
    .jet-images-layout__item.col-desk-4.image-loaded {
        width: 50%;
        float: left;
    }
    }

    and let me know if it worked

    vero.laban-598c5e41

    Thank you again for your answer, I copy the code you gave me but it does not work…

    Feel free to try the code you give me in the Customize panel of my site. I gave you all the access codes.
    Thank you very much!

    Private
    Nodari Support Team
    This reply has been marked as private.
    Private
    vero.laban-598c5e41
    This reply has been marked as private.
    Nodari Support Team

    Hey there

    Fixed, this is the code I added in the page HTML widget at the bottom:

    <style>
    
    @media (max-width: 768px){
    .col-desk-4 {
    -webkit-flex: 0 0 50% !important;
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    }
    @media (max-width: 1024px){
    
    .col-desk-4 {
        -webkit-flex: 0 0 33%;
        -ms-flex: 0 0 33%;
        flex: 0 0 33%;
        max-width: 33%;
    }
    }
    </style>
    vero.laban-598c5e41

    Thank you very much!!!

    It’s perfect!

    Private
    Amir Rather Support Team
    This reply has been marked as private.
    vero.laban-598c5e41

    I have already made if of course!

    Nodari Support Team

    Thank you, I will mark this case as closed 🙂

Viewing 14 posts - 1 through 14 (of 14 total)
You must be logged in to reply to this topic. Login