Hey there, I'm encountering some trouble with the image links at the top of my page. As I resize the browser or change screen resolutions in media queries using percentages, the images are resizing accordingly. However, I'm noticing that as the images get smaller, the gap between each image increases.
Do you have any suggestions on how to fix this?
I attempted to use font-size:0;, but unfortunately it didn't solve the issue.
Here is the CSS code:
.top_grow {
display:inline-block;
vertical-align:top;
font-size:0;
.top_grow img:hover {
border: 2px solid #fff
}
.top_grow .text {
font-size: 11px;
letter-spacing: 1px;
word-spacing: 1px;
}
.cats {
width: 100%;
height: 100%;
}
}
This is the HTML code:
<div class="top_grow">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="cats" src="test/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
<div class="text">
Mario Galaxy`
</div>
</a>
</div>
... (additional HTML code for more image links)