Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Matthew S
PLUS
Matthew S
Courses Plus Student 6,513 Points

[HELP] Trying to get my "grid slider" to be responsive (js/JQ + CSS).

Hello. I'm trying to get my "grid-slider" to be responsive and I've been stuck on a weird glitch that my slider keeps doing when going between media queries in CSS3.

Right now, I've put my slider up on jsFiddle with the source code. However, the issue is when you load up the slider in either the ipad view or normal view (for testing purposes), when you go to either the ipad view from normal, or vice versa, when you use the arrow keys (right/left) to navigate the grid, the grid somehow adds a margin to the right of it pushing it to the side offsetting it from the container. For some reason, I can't figure out why it's doing so???? :(

jsFiddle

You'll have to refresh the page and test out both the ipad size / normal view, and arrow keys (left/right) to move the slider. Sometimes you'll have to click near the container / or on it, just to get the arrows keys to react, since it's on jsFiddle.

Thanks! :3