How to get Owl Carousel Owl-Page (dots) Responsive


Tags: jquery,html,css,owl-carousel

Problem :

http://prntscr.com/84291c This is what I am trying to get responsive. I'm trying by using media queries.

@media only screen and (min-width: 320px) {
    .owl-theme .owl-controls .owl-page + .owl-page
    }
}

I have tried putting this code in both my css page and the owl.theme.css

Another thing I have tried is putting it in a wrapper like this in my html and then use media query on it. Neither was successful. How can I get it responsive so that the dots dissappear when viewed on mobile?

<div class='dot-wrapper'>
  <div class='owl-controls'>
    <div class='owl-pagination'>
        <div class='owl-page'></div>
    </div>
  </div>
</div>


Solution :

Try this :

 @media all and (max-width: 658px) { // for mobile devices

   .dots { display:none; } // this is just an example, you can change dots with your own tags

 }

    CSS Howto..

    How to hide old styled version of select option? [duplicate]

    Dropdown list doesn't show up, what am i doing wrong

    How to Triger a css animation for a y element from a a trigger x

    How to apply text rotation in CSS?

    How to fix html border corner slope with css?

    Javascript: how to check/delete a css style tag in the head of the document

    How to detect css properties in div

    How to add a specific class to select2 drop element?

    How is margin-top and margin-bottom getting added

    How to get On/Off FlipSwitch to trigger function

    How to create a natural-looking line using css and maybe javascript? [closed]

    How do we group monospace font families with regards to their serif property? [closed]

    web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    How would I write css to access the following class “total total_plus hidden_elem” or “total total_plus”?

    How to give style to iframed page content using parent pages css?

    How to make child element width 30 precent of parent elements width using css?

    How to move image slowly with animation when appending the image to tag

    How to Assign on demand CSS Styles to some div or class?

    How to style webpage with percentages

    Ionic Side Menu Not Showing Content

    SceneBuilder (by gluon) doesn't show imported fonts

    How to fix clipped text over 3D transform image on Safari?

    How to add CSS inline in Vaadin?

    Content property in CSS - how to put content into several paragraphs

    How to use CSS to center the buttons?

    Show/Hide (Read More) Text Depending on Number of Character Pure CSS

    How to set color of the Button with jQuery UI?

    How to select lowest level ul in nested ul in Javascript/ css

    how to add multiple images to a css header?