Okay
  Public Ticket #1428937
Responsive
Closed

Comments

  • Stephen started the conversation

    Hello,

    I'm trying to hide an image on mobile devices but show an alternate image on those devices and above.

    Do you support the hidden-*-up classes?

    https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

    Specifically hidden-xs-down

    Thank you

  •  585
    Support Agent replied

    Hi Stephen,

    The theme supports classes like 'hidden-xs' and 'hidden-ms', which are added to some images.

    Should you want to hide/show elements on different screen sizes, you can simply add Extra Class Name to them, for example 'mobileOn' and 'MobileOff', and then define the screen sizes they will be visible on with CSS properties.

    @media (max-width: 768px) {
        .mobileOn {
            display: block;
    }
    }
    @media (min-width: 769px) {
        .mobileOn {
            display: none;
    }
    }
    @media (min-width: 769px) {
        .mobileOff {
            display: block;
    }
    }
    @media (max-width: 768px) {
        .mobileOff {
            display: none;
    }
    }

    Let us know if you need additional help.

    Regards, BoldThemes team

    If you like our products please consider leaving us a rating. A huge thank you from BoldThemes in advance!