Embedded Instagram post with description: Same heights?

Question

I have a page where I embed a few Instagram posts. All posts are embedded via the function if you see a picture and click on the right bottom corner on "Embed this".

I changed the width to 350px.

I searched for responsive instagram embed and found something for single post embeds.

Can someone check this fiddle and explain me what's wrong? :(

Thank you in Advance!

https://jsfiddle.net/ouqg0wj7/

Code:

.row .col-sm-4 iframe {
  max-width: 350px;
  min-height: 100%;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4"><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:350px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/_h7TJTEIfv/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">S M I L E  #bemarvelous #marvelousproducts #marvelousbeauty #beauty #style #hair #product #men #women #lovely #hairdresser #hairdesign #allblack #stylist #instyle #vogue #paris #moscow #milan #london #newyork #lissabon #berlin #stuttgart #germany #italy #russia #portugal #picoftheday #picture</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein von @melo_modica gepostetes Foto am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-12-20T22:17:57+00:00">20. Dez 2015 um 14:17 Uhr</time></p></div></blockquote></div>
  <div class="col-sm-4"><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:350px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/_WgapQQeNY/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">My sweet brother @andreeeiiiii #mybrother #blogger #bloggers #blogging #howilovehim #whatuseeiswhatuget #larissssssssssssa #bemarvelous #beyourself #staystrong #dowhatsbestforyou</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein von Lrissa (@larissssssssssssa) gepostetes Foto am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-12-16T11:51:24+00:00">16. Dez 2015 um 3:51 Uhr</time></p></div></blockquote></div>
  <div class="col-sm-4"><blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="6" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:350px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/-y0E9vr9-E/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">MARVELOUS ❤️#marvelous #bemarvelous #hair #salon #salondeluxe #haircolor #hairstyle #hairstylist #follow4follow #follower #follow #followme #instagood #instalike #likes #lfl#look #happy #beautiful #girl#emelüstün #me#selfie #keratin #volume #shine #glanz #love</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein von Emel Üstün (@emelim82) gepostetes Foto am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2015-12-02T15:10:33+00:00">2. Dez 2015 um 7:10 Uhr</time></p></div></blockquote></div>
</div>

<script async defer src="//platform.instagram.com/de_DE/embeds.js"></script>

The final question: How I get this result? From current code?

Whats the question? And post your code here too – StudioTime Feb 14 '16 at 13:33 — StudioTime, Feb 14 '16 at 13:33
@DarrenSweeney: I added the missing details. Thank's! – Patrick Feb 14 '16 at 21:17 — Patrick, Feb 14 '16 at 21:17

score 1 · Accepted Answer · answered Feb 14 '16 at 21:29

1

Unfortunately, you can’t. It’s possible to make the Instagram iframes the same height (using display: table-cell; or JS) but it won’t look exactly like you want.

Demo: https://jsfiddle.net/ouqg0wj7/3/

You would need access to the Instagram embed CSS to fix it.

Perhaps you could use Masonry or CSS columns instead?

answered Feb 14 '16 at 21:29

Ted Whitehead

1,731
10
18

Hmm thank you very much for your answer. Tomorrow I try this Masonry thing, but I hope there is another solution which is better :) http://www.bloggerever.com/2014/06/how-to-create-masonry-based-instagram.html – Patrick Feb 14 '16 at 23:32
1

No prob, good luck. (would you mind up-voting my answer if it was helpful? thanks!) – Ted Whitehead Feb 14 '16 at 23:35
Or is there another solution for embed instagram posts? My thought is a php proxy for the iframe to add the custom css code :) But don't know if it's allowed and how to change... I think its the JavaScript which I must change then, too. Don't know if Instagram like that :D – Patrick Feb 14 '16 at 23:36
Well, you won’t be able to do anything to the iframe’s content since it lives on an external server. You may be able to use Instagram’s API to create your own custom embeds, but that would be complicated and may violate their terms of service. I think Masonry is the simplest solution here :) – Ted Whitehead Feb 14 '16 at 23:43

Embedded Instagram post with description: Same heights?

1 Answers1