Customise Feature Image Height

This topic contains 12 replies, has 3 voices, and was last updated by  clubtogethernow 4 years, 7 months ago.

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

Open Support Ticket
  • Author
    Posts
  • #539815

    clubtogethernow
    Free User
    Post count: 56

    Hi guys,

    What would the CSS be to change the height of the feature image on a certain page? For both mobile & desktop.

    Thanks

    #539835

    Alex Rollin
    Moderator
    Post count: 27815

    GD Images are responsive. You would want to change the height of the container that is showing the image. You can do that with custom CSS. If you share the URL we might be able to share an example.

    #539836

    clubtogethernow
    Free User
    Post count: 56

    Hi Alex,

    This is one of the pages I want to change it on:https://clubtogethernow.com/golf/, I want it to be taller on desktop but shorter on mobile!

    Thanks

    #539845

    Kor
    Moderator
    Post count: 16516

    Hi there,

    Thanks for your reply. Here is the custom CSS code that you can use.

    /*Desktop*/
    header .featured-area {
        max-height: 250px;
        min-height: 250px;
    }
    
    /*Mobile*/
    @media only screen and (max-width: 600px) {
      header .featured-area {
        max-height: 150px;
        min-height: 150px;
    }
    }
    #539851

    clubtogethernow
    Free User
    Post count: 56

    Perfect, thanks Kor!

    Also the upload file section of “Add a listing” looks really poor on mobile. Is there anything that can be done? Please see attached.

    #539906

    Kor
    Moderator
    Post count: 16516

    hi clubtogethernow,

    Thanks for your reply. Could you tell me what are you trying to adjust on mobile for the add listing page? I’ll do my best to help.

    #539909

    clubtogethernow
    Free User
    Post count: 56

    Hi Kor,

    Thanks! I just want the drop upload image content to be a lot cleaner, it is very messy on the attached screenshot above.

    #539915

    Kor
    Moderator
    Post count: 16516

    Hi clubtogethernow,

    Thanks for your reply. Try using the custom CSS code below.

    @media only screen and (max-width: 480px){
    .geodir-add-files .geodir-files-dropbox .geodir-dropbox-title {
        clear: both;
    }
    
    .geodir_form_row label {
        width: 100%;
    }
    
    .geodir_message_note {
        padding-left: 0px;
    }
    }
    #539921

    clubtogethernow
    Free User
    Post count: 56

    Hi Kor,

    This doesn’t seem to have worked, please see the attached screenshot. Any other ideas?

    Thanks

    #539988

    Kor
    Moderator
    Post count: 16516

    Hi clubtogethernow,

    Thanks for your reply. I don’t see the code when I checked your Website. It should be fine now and could you please check?

    #540015

    clubtogethernow
    Free User
    Post count: 56

    Thankyou very much!

    #542077

    clubtogethernow
    Free User
    Post count: 56

    Thanks again for the above.

    How would I go about doing the same for the search listings page?

    Cheers

    #542273

    clubtogethernow
    Free User
    Post count: 56

    Hi guys,

    Can someone take a look at how I reduce the image height on mobile for the search listings page?

    Thanks

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

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

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount