CSS issue with slider image sizing in mobile

The image in the slider is not being shown correctly – on mobile screens the image is cropped so that the logo is partially out of the screen. Can you help me fix that?

  • Bamboo Kit
    • Staff

    Hello, Marcus

    Hope you’re well today and thank you for reaching out to us.

    Please try adding this CSS below.

    @media only screen and (max-width: 425px) and (min-width: 400px){
    #fusion-slider-132 .tfs-slider .background-image{
    height: 240px !important;
    }
    }
    @media only screen and (max-width: 375px) and (min-width: 340px){
    #fusion-slider-132 .tfs-slider .background-image{
    height: 217px !important;
    }
    }
    @media only screen and (max-width: 320px) and (min-width: 300px){
    #fusion-slider-132 .tfs-slider .background-image{
    height: 185px !important;
    }
    }

    You can use this CSS in a plugin called Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/ or add this CSS in WordPress Additional CSS section of Customizer too, by navigating to Appearance › Customize section in your dashboard. Scroll down to the bottom and click on the Additional CSS section.

    Here is a screenshot when I tested and applied this CSS on my chrome dev tools.

    Hope this helps, thank you.

    Kind regards,

    Bamboo

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.