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..

    CSS: How to fake a :hover state?

    How would I go about editing the polar clock counter clockwise?

    How to make gradual colour change when hover with CSS?

    How to change image css after rotating it in JS?

    How to scroll right and left by mouse scroll button

    How to write specific CSS for mozilla, chrome and IE

    Bootstrap: how to clear images in a gallery?

    How to formatting a simple
      in columns and bolding the first item on its own line

    How to hide specific text from content wihtout calling any CSS?

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    What html or css attribute should I modify so that a mobile browser shows the website with no blank space on the right?

    How to get rid of white space between round image and border in HTML/CSS/Bootstrap?

    How to temporarily add a CSS style?

    [SOLVED]How to generate dynamic external link?

    How to make a footer stay on the bottom?

    How to make image override parent width and stretch to browser width?

    CKEditor — How can I add document-specific CSS styles

    how to show element if visible in view-port with jQuery? (UPDATE)

    How to reduce the number of sprites when using css sprite technique

    CSS how to revert SVG animation on mouseout from current frame

    How to hide specific lines of css from IE 7 and IE 8

    How to create and manage large CSS projects?

    How to make <'details'> drop down on mouse hover

    How to Layout a Watermark Image that is transparent along with a banner image and content div?

    CSS - How to use by ID and by class

    How to make a block element adjust to the size of what is inside it?

    How to properly separate pages in jQuery Mobile?

    How can I get this css to display correctly in Chrome?

    How can I apply CSS to a link if at least one input is not original, and undo that change if all inputs are original?

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