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

Posted by Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

how to remove that horizontal scroll

hey i m currently working on a responsive image gallery project but here i m facing problem with horizonal scroll bar on compressing the screen resolution please check my code here..... http://codepen.io/mehra_as/pen/PZRmga

2 Answers

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Hey Suresh,

I think the problem here is that you can't change the styles of the image here because the image is not shown in your gallery. If you click on the images the images are shown on the external website you're linking to via the anchor element.

To answer your question: You can remove the horizontal scrollbar via the CSS property overflow-x and the value of hidden.

Like so:

img {
    overflow-x: hidden;
}

However in your case it won't work because you are linking to the images on an external website. If you want to display the images larger on your site after the user clicks on them you could use a jQuery Lightbox. If you decide to do this I recommend watching the jQuery Basics Course here on Treehouse as you're building a Lightbox in the third section of the course. I hope I could understand your question and help you.

Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

i m making image gallery responsive for same

Suresh Raina
Suresh Raina
Courses Plus Student 205 Points

is overflow-x:hidden will be safe for future prospectus

Tobias Helmrich
Tobias Helmrich
31,603 Points
Tobias Helmrich
Tobias Helmrich
31,603 Points

Do you mean if overflow-x: hidden is future-proof? I absolutely think so! Every browser supports it and I don't see any reason why this should change in the near future.

If you're interested in learning more about the property I recommend to read about it in the Mozilla Developer Network: overflow, overflow-x

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

You can fix this problem by adding a padding declaration and set it to 0 on mobile devices.

 @media (max-width: 480px)
#gallery {
    width: 100%;
    padding: 0;
}

I hope this helps.