New to the community? Start here

[Hustle Pro] Hustle plugin not obeying custom CSS

Hey guys. I’m trying your Pro versions and found the Hustle plugin is simply ignoring custom CSS commands. Funny thing is it works in the backend, but not actually in the frontend. Is that a bug?

What was I trying to do with CSS? Opening a 500x500px popup showing just a single image (a notice to be seen for all visitors), with no margins, overflow:hidden. Also, open this popup on mobile devices zoomed enough but without cropping nor showing any scroll bars.

I ended up setting some margins to keep a tidy view cause I was unable to perform the above.

Hope you can help.
Thanks!

Marcelo

Mon, 7 Oct 2019 21:50:15
More Hustle Pro discussions
Hustle Pro
  • Predrag Dubajic
    • Support

    Hi Marcelo,

    It seems that the issue is related to hustle-layout-body class which is used in your CSS.
    I can see that this class is added by Hustle CSS buttons but when I check the HTML output on the frontend I don’t actually see that class being used.

    Try removing or replacing that class with hustle-content and your CSS should work after that, and in the meantime, I’m creating a report for our devs to check this out.

    Thanks for bringing it to our attention!

    Best regards,
    Predrag

  • marcelo_pedra
    • New Recruit

    Thank you very much! Replacing hustle-layout-body with hustle-content did the trick.

    Now a feature request: it would be nice if one could set independent width+height dimensions for the popup on desktop and other set for mobile. With the actual ones, it looks good on desktop but its cropped on mobile.

    Also, add options to set/reduce to zero margins/padding of content, so it will look borderless, as you can see it now on desktop with my CSS modifications. Although, that margin is not being respected on mobile thus losing the style we wanted for it to have.

    Thanks!

  • Predrag Dubajic
    • Support

    Hi Marcelo,

    The popup you are using is quite specific and the options you are referring to are mostly available already.
    Perhaps not in the way that you describe it, but when you set custom width you can choose to have it on all devices or only on Desktop, you’ve set this for all devices but if you switch to desktop then Hustle will resize it when it goes under that set width.

    As for the margins and padding, those are there to keep your content (usually text) from hitting the borders, and in your case the image is placed directly in the content itself.
    If you set your image as featured image, instead of adding it in content, and set popup size to fit image dimensions (ratio is actually more important) then the borders will be gone.
    This is an example of featured image with Custom popup size that fits image sides ratios, without any additional CSS:
    [attachments are only viewable by logged-in members]

    Best regards,
    Predrag