Support » Plugin: Hustle - Email Marketing, Lead Generation, Optins, Popups » Custom CSS for Feat Image not taking

  • Resolved Sukotto

    (@sukotto)


    So I have a Slide-In with a Featured Image with Fitting set to ‘None’ as that basically looks best on Desktop/Mobile. However on Desktop the image flexes down to fit the rest of Slide-In and leaves a bit of a gap on the top & bottom.

    When inspecting element in a browswer and fiddling with the CSS I’m able to fix it with

    .hustle-layout .hustle-image .hustle-image-fit–none {
    max-width: 56% !important;
    }

    However, when I try and put this in the Custom CSS section in Hustle not only does it not work, but the custom code also doesn’t show when inspecting element. What am I doing wrong?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Predrag – WPMU DEV Support

    (@wpmudev-support1)

    Hi @sukotto,

    It seems that the issue with the last class having two dashes one after another and because of that it’s not getting applied on the frontend.
    I was able to replicate it on my end and created a report for our devs to check it out further.

    In the meantime, if you use something like this it should do the trick:

    .hustle-image {
    max-width: 56% !important;
    }

    Cheers,
    Predrag

    Hi and thanks, Predrag!

    This totally did the trick on desktop, thank you so much!!

    However, is there any reason it’s not respecting the mobile screen width when I do:

    @media screen and (min-width: 785px) {
    .hustle-image {
    max-width: 60% !important;
    }
    }

    Cheers!

    Plugin Support Adam – WPMU DEV Support

    (@wpmudev-support8)

    Hi @sukotto

    I hope you’re well today!

    You mentioned “mobile screen” so are you sure you want to use “min-width” in your CSS? I mean – should this CSS apply to all the screens wider than 785 pixels or to narrower?

    If it’s the latter, it should rather be “max-width: 785px”.

    However, it’s also quite possible that it’s due to “forcing” the CSS rule using “!important” so it might be better to use multiple media queries rather than use “general” rule and media query for other screen size. In such case we could use a mix of “min-wdith” and “max-width” but the order of rules would be important. For example:

    /* for desktop */
    @media screen and (min-width:960px) {
    .hustle-image {
    max-width: 56% !important;
    }
    }
    
    /for tablets */
    @media screen and (min-width:785px) and (max-width:959px) {
    .hustle-image {
    max-width: 60% !important;
    }
    }
    /for smaller screens */
    @media screen and (max-width:784px) {
    .hustle-image {
    max-width: 65% !important;
    }
    }

    That’s just an example but should give you a foundation for further tweaking, I believe.

    Best regards,
    Adam

    You mentioned “mobile screen” so are you sure you want to use “min-width” in your CSS?

    Ah, you are correct, I had a brain-flub there when typing. Thanks for your additions, setting a “range” like this seems to have it behaving much better now. Cheers!

    Plugin Support Jonathan – WPMU DEV Support

    (@wpmudev-support9)

    Hello @sukotto

    I hope you are doing well!

    Glad to know that all is well now!

    I’ve marked this ticket as resolved. If you do have any followup questions or require further assistance feel free to reopen it and let us know here.

    Kind regards,
    Nastia

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.