Listing Carousel Widget Frame

This topic contains 14 replies, has 2 voices, and was last updated by  Jeffrey Williams 7 years, 5 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • #318817

    Jeffrey Williams
    Buyer
    Post count: 72

    Hello,

    When displayed as a carousel, images in the CPT Listing Widget have different dimensions. Is there a setting to ensure they all have the same dimensions?

    See snapshot for example of the issue.

    Thanks for the help!

    #319309

    Paolo
    Site Admin
    Post count: 31206

    Hi,

    please try this CSS:

    
    
    .geodir_flexslider .geodir-slides > li {
        max-height: 150px;
    }

    You should add it to GeoDirectory >> Design >> Scripts >> Custom CSS.

    Let us know how it goes,

    Thanks

    #319472

    Jeffrey Williams
    Buyer
    Post count: 72

    Hi @paolo

    Thanks for the code! However, instead of sizing the GD Listing Carousel, it adjusted the Photo Slider on the Details page of the listing.

    How should I tweak the code so it applies to the right element?

    Thanks for the help!

    #319475

    Paolo
    Site Admin
    Post count: 31206

    try:

    
    
    
    #geodir_widget_slider .geodir-slides > li {
        max-height: 150px;
    }

    Thanks

    #319487

    Jeffrey Williams
    Buyer
    Post count: 72

    Nope, looks the same as the last snap shot. Cleared my cache to make sure.

    #319489

    Jeffrey Williams
    Buyer
    Post count: 72

    Now that I look at it, it appears that some of the pics in the dummy data have thumbnails smaller that 150px. So while your code limits how big the pics are, if some thumbnails are smaller that 150px, the display still looks uneven. Is there a way to force all thumbnails to be minimum and maximum of 150px?

    Thanks!

    #320060

    Paolo
    Site Admin
    Post count: 31206

    Hi,

    the css I gave seems to be working, to make it work for that dummy image too you need to reduce it to 140px:

    
    
    #geodir_widget_slider .geodir-slides > li {
        max-height: 140px;
    }

    There is no other way to solve this, other than trying to use images with the same size ratio.

    Thanks

    #320183

    Jeffrey Williams
    Buyer
    Post count: 72

    Hi @paolo

    Upon further testing, the code is not working. In order to test it, I changed the max-height to 50px, so it would be obvious that it either worked, or not.

    There was no change (see attached snapshot)

    Waiting for your reply.

    Thanks for all your help.

    Cheers.

    #320202

    Paolo
    Site Admin
    Post count: 31206

    Hi Jeffrey

    I tested that code and it was working just fine. Please provide credentials and I’ll apply it for you.

    Thanks

    #320211

    Jeffrey Williams
    Buyer
    Post count: 72
    This reply has been marked as private.
    #320732

    Paolo
    Site Admin
    Post count: 31206

    HI,

    You copy and pasted the CSS with wrong formatting.

    You have :

    
    
    
    #geodir_widget_slider .geodir-slides & gt ; li {
        max-height: 50px;
    }

    (& gt ; without spaces )
    instead of :

    
    
    
    #geodir_widget_slider .geodir-slides > li {
        max-height: 140px;
    }

    I tried to correct it, but it’s not saving the new information and I have no idea why…

    Let me know if you can save it correctly.

    Thanks

    #323406

    Jeffrey Williams
    Buyer
    Post count: 72

    Hi @paolo

    Circling back to this.

    I took the time to upgrade my account with my host. Move it from a shared server to a Cloud Server.

    The good news is that it solved many issues, including saving your code so the carousel frame displays correctly.

    However, the bad news is it doesn’t work on mobile. If you look at the carousel on desktop, it works perfect, but take a look at it on mobile.

    Is there a way to fix it?

    Thanks!

    #323762

    Paolo
    Site Admin
    Post count: 31206

    I repeat, using images all with the same ratio would be better.

    otherwise you may need this too:

    
    
    @media screen and (max-width: 480px) {
    #geodir_widget_slider .geodir-slides>li {
        max-height: 125px;
    }}
    

    Let me know,

    #325498

    Jeffrey Williams
    Buyer
    Post count: 72

    Hi @paolo

    Circling back to this.

    Yes, I agree that using images all with the same ratio would be better, but getting every single user to post an ad that way, is not realistic. People just want to upload their photo and expect to work. We both know that.

    So, it’s incumbent for the platform to be user friendly, otherwise people simply won’t use it, and we’re all wasting our time.

    I’ll try the code.

    Cheers my friend!

    #325502

    Jeffrey Williams
    Buyer
    Post count: 72

    UPDATE TO MY LAST REPLY

    Almost worked, but still displays uneven. Thanks for trying. I really appreciate it! 🙂

    Like to make a suggestion that future GD updates includes a setting where Admin can force all carousel images to display the same predefined size. I’ve used carousels like that in that past, so I know it’s possible. 🙂

    Thanks for all the great work!

    Cheers.

Viewing 15 posts - 1 through 15 (of 15 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket