Clickable area is too big

Could you guys help me check why the clickable area is so big under the work section of my portfolio page???
I want the clickable area to lock into those 4 pic.
However now if you try you can see that the gap between 1st 2 pictures is also clickable.
How do I change that so when user is prompted to click when the mouse is hovering on the 4 pics only.

http://codepen.io/zhouxiang19910319/pen/PbLwYQ?editors=1100

Take a look into flexbox , i can see there is some margin but its necessary to look deeper to see where is it coming from, But again with flexbox this is much easier to be done check out my example i just did to show you http://codepen.io/AndreiCalazans/pen/ObqPeG

1 Like

Now I have a better answer :grinning: I removed img-responsive from the thumbnail, and the extra clickable area to the right went away. So it seems like somehow the image is expanding to be bigger than we can see… Although I don’t know why!
Edit: the styling for the thumbnail is a bit confusing; it has classes img-responsive and dog, and inline style=“width:400px;height:228px;” you may find it easier to get it looking the way you want if you simplify.

It seems to be related to conflicting values for the size of the images. As above, removing img-responsive got rid of the extra clickable area to the right (see first thumbnail); removing both the height and width defined in class dog and defined inline also expanded the thumbnail so that only space visually part of the thumbnail was clickable (see second thumbnail). http://codepen.io/BartBucknill/pen/KNEdbG?editors=1100
Obviously size and positioning is now different from what you want, but hopefully correcting that wont be too difficult.
Hope this helps!

@Surogo I understood what you guys mean already. I will try to fix it. I will try to look at bootstrap again.
Cos what I tried to achieve was quite simple. 4 thumbnails at the center of the “work” section. And when view on mobile those thumbnail will auto adjust themselves from 2x2 to 1x4.