Something seems off with my images. They appear correctly when I first open the browser, but if I resize it, they go all wonky. Refreshing the page fixes it, but if I open a larger browser window and then make it smaller, it messes up again. It's puzzling because the browser size remains the same when I refresh the page.
Can someone help me figure out what's causing this issue?
Here is the code I'm using:
<section class="bordo">
<div class="abt3">
<a href="https://www.facebook.com/media/set/?set=a.1482686551971696.1073741836.1450873611819657&type=3" target="_blank"><img src="fb.png" onmouseover="this.src='fbgrey.png'" onmouseout="this.src='fb.png'" width="10%" id="face"></a>
<a href="https://www.flickr.com/photos/105943617@N06/" target="_blank"><img src="flik.png" onmouseover="this.src='flikgrey.png'" onmouseout="this.src='flik.png'" width="10%" id="flikr"></a>
<a href="https://500px.com/owlyac" target="_blank"><img src="500.png" onmouseover="this.src='500grey.png'" onmouseout="this.src='500.png'" width="10%" id="gram"></a>
</div>
</section>
And the css:
#face {
padding-left: 30%;
padding-right: 2.5%;
}
#flikr {
padding-right: 2.5%;
padding-left: 2.5%;
}
#gram {
padding-right: 25%;
padding-left: 2.5%;
}
You can view the issue here: Try resizing the window to reproduce the problem.
Thank you!