Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

i m making image gallery responsive for same

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

Tobias Helmrich
Tobias Helmrich
31,601 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

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.