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

CSS Framework Basics Prototyping with Foundation Building a JavaScript Dropdown Menu and Orbit Slider

Chen Wang
Chen Wang
7,371 Points
Posted by Chen Wang
Chen Wang
7,371 Points

Weird padding issue in orbit. Anyone can help me, please.

I'm using foundation 5.

After I added some padding to the orbit container, the orbit shows small part of content of next slide.

When the screen size is large, it works well, but when I reduce the screen size, the above problem appears.

Here is the link to its workspace: https://w.trhou.se/1fct1gwo0y

You can click "Fork snapshot" on the top right corner in the link, then you are able to preview and modify the files.

Please notice that the padding issue only appears when we reduce the browser size to mobile size.

3 Answers

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

Hi Chen, I'm sorry my first answer was poor but now I would say the left/right padding on .orbit-container is adding more width and that reveals the content of the next slide. Instead, try targeting the <li>'s: .orbit-container .orbit-slides-container > *

Mark Wilkowske
PLUS
Mark Wilkowske
Courses Plus Student 18,131 Points
Mark Wilkowske
Mark Wilkowske
Courses Plus Student 18,131 Points

In .orbit-container I removed the left/right padding and it looks good in medium and small view.

Chen Wang
Chen Wang
7,371 Points
Chen Wang
Chen Wang
7,371 Points

That's true. Actually, I add those paddings by myself. Initially, they don't have such issue.

But the problem is I want to add those paddings. Could you explain why adding paddings would cause this problem? The content of the second slide appears on the padding area of the orbit container. Why would this happen? And how to avoid this issue?

In other word, if I want to add paddings, how to avoid this problem?