Having trouble with Owl Carousel being responsive

[CodyHill]

Hi,
I need to build this carousel but I have a lot of trouble making it responsive.
What I would like is when there are 3 cards in a slide when the button is pressed all 3 of them move out of the container and on mobile if there is only one card when the button is pressed only one should move.

I tried doing it by separating the big slide and the cards and run javascript for each using matchMedia() but I didn't even get to that as I have some other bugs.

Another problem I have is when the width of the windows is resized the first element is getting out of the view, plus for some reason, they do not fit the way that they should fit inside the slider. The container is blue and you can see that the first and last card is outside the container.
I tried to position them with javascript but then, after I position the cards too, the second pair of cards (second slide) is pushed way out to the left. I think is because it also calculates the with of the slider.

This is the codepen:

https://codepen.io/raul-rogojan/pen/vYZRrme

[administrator]

Sounds like a solution can be found with CSS floats. 

[rvandyke]

Did you design it from the smallest screen size, then scale it from there? That's the easiest way to make anything responsive. Set background colors on divs before putting in the content and make sure it is sizing the way you want it to then resize as the screen increases and when you want the divs to stop resizing, set a max width. Hope that helps. Happy coding .