Hi guys. I´ve started working on my tribute page and I am having some problems with the pictures I uploaded because everytime I zoom out, starting from 100%, a gap between the columns appears.
At the top I put the
I used the div row and then three col-md-4 divs to nest the images in. In the first and third divs I put one class with margin settings in order to eliminate gaps between each of them and the middle column.
Within each image I put the classes of img-responsive and a class that sets the width and height of the images. The width is the same for all three images.
Any idea on how to solve this?
Thanks in advance and happy coding!
Link to my Pen: https://codepen.io/Lavrador/pen/zdZYWa
It would help greatly if we had a link to your project so that we could review your code.
Can you edit your post and include a link to your project?
-OneManStack.
I forgot to make my html into a comment.
Sure, here it is: https://codepen.io/Lavrador/pen/zdZYWa
Doing some light testing with your Pen I see that you hard code image height and width with .pic-size & .pic-size-zoso. You also have the BootStrap img-responsive class. Commenting out the manual img height and width in CSS helps with your issue.
I also see that you hard code the column sizes with .margem-da-terceira-col and .margem-da-primeira-col; commenting these out also reduces the issue you seem to have.
I am not sure if this is actually the issue however, I am still beginning myself.
What you can try is to use the @media in CSS Read Examples Here to see if defining max / min widths for certain screen sizes will help. Maybe the browser is interpreting the zooming as a different screen resolution?
One Man Stack.
I think the @media query might work but I can´t seem to use it properly.
Still, thanks for your help.
Btw, in your computer, at 100% zoom, did you see the images aligned properly, all with the same size except for the middle one?
Best,
Lavrador