HTML/CSS responsiveness

Asked

Viewed 110 times

2

I am adjusting a code, and I can not in any way, make the arrows of Prev and next on the carousel, appear on mobile! I’ve adjusted for the media queries, but nothing solves!

The code is too long to put here, so anyone who can take a peek, it’s published here: www.extudando.esy.es/hotsite

and you can download the files here: www.extudando.esy.es/hotsite/hotsite1.zip

html

  • First of all. You can’t tell if it’s a problem with Media Query. It can be a property that applies to the JS function that creates the Carousel. Which library you’re using to create the carousel?

  • From what I’ve seen he’s hiding the arrows with CSS Inline. So probably the one doing this is the library’s own script. So you should have a property that you can choose this. If you put a class .slick-slider .slick-arrow{
display: block!important;
} would work, but is not a good practice.

  • Unfortunately it still didn’t work =/

  • This probably occurs because the mobile interaction is dragging with your finger and not clicking. In the plugin you probably used in an option to enable small screen arrows. Take a look at the plugin documentation and see the Activation Script that there should be the option to activate the arrows.

1 answer

0

The person responsible for this is the property arrows, must be true when it is of certain size. You specify.

$('.responsive').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 320,
        settings: {
            arrows: true
        }
    }]
});

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.