I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite static. When viewed on a larger screen, the images appear in a row of three and are not aligned properly. Additionally, if one of the images is wider than it is tall, it does not align correctly with the larger image on the left, resulting in an awkward display. Below, you can see a screenshot of how it appears on my MacBook (which is how it should always look regardless of screen or image dimensions), as well as another screenshot showing how it looks on a bigger screen. Any assistance on resolving this issue would be greatly appreciated!
Desired Layout: https://i.sstatic.net/uNxJK.png
Current Display on Bigger Screen: https://i.sstatic.net/wzhb1.png
Instafeed Configuration:
var feed = new Instafeed ({
get: "user",
userId: "1957779802",
limit: 3,
sortBy: "most-recent",
resolution: "standard_resolution",
template: '<div class="img"><a href="{{link}}"><img src="{{image}}" /></a></div>',
accessToken: "1957779802.bef71cd.f6782544ba674fc3af9dddb2fec415fe"
});
feed.run();
HTML Structure:
<div class="col2">
<div id="instafeed"></div>
<div class="acell">
<div class="contentbox">
<a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img class="yt-bg" src="<?php bloginfo('stylesheet_directory'); ?>/images/youtube-img.jpg" alt="Youtube" /><span class="covered"><div class="play"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/play-img.png"></img></div><div class="text"><h3>Press Play!</h3><p>Watch clips on our YouTube channel.</p></div></span></a>
</div>
</div>
</div>
CSS Styling:
.social-container .row1 .col2 .instafeed {
width: 100%;
height: auto;
}
.social-container .row1 .col2 .img {
margin: 5px;
height: auto;
width: auto;
float: left;
text-align: center;
}
.social-container .row1 .col2 .img a img {
display: inline;
border: 1px solid #ffffff;
}
.social-container .row1 .col2 .img a img {
width: 150px;
height: 152px;
}
.social-container .row1 .col2 .img:first-child {
margin-right: 30px
}
.social-container .row1 .col2 .img:first-child a img {
width: 330px;
height: 320px;
}