Vimeo Widget Montage Stacking Vertically - html

Question

My question is: How do I get the vimeo widget montage to display as an inline-block similar to an image gallery? Right now it is stacking vertically. No matter what class I try to edit, it remains like that.
This is the CSS/HTML that defines the vimeo widget:
<style id="badge-styles">
/* You can modify these CSS styles */
.vimeoBadge { margin: 0; padding: 0; font: normal 11px verdana,sans-serif; }
.vimeoBadge img { display:inline-block; width:500px; height:auto; border: 0; }
.vimeoBadge a, .vimeoBadge a:link, .vimeoBadge a:visited, .vimeoBadge a:active { color: #3A75C4; text-decoration: none; cursor: pointer; }
.vimeoBadge a:hover { color:#00CCFF; }
.vimeoBadge #vimeo_badge_logo { margin-top:8px; width: 57px; height: 16px;}
.vimeoBadge .credit { font: normal 11px verdana,sans-serif; }
.vimeoBadge .clip { padding:0; display:inline-block; line-height:0; }
.vimeoBadge .s200 { width: 100%; }
.vimeoBadge .clip a { display:inline-block;}
.vimeoBadge .vertical { float: none; }
.vimeoBadge .caption { font: normal 11px verdana,sans-serif; overflow:hidden; width: auto; height: 30px; }
.vimeoBadge .clear { display: block; clear: both; visibility: hidden; }
.vimeoBadge .s160 { width: 160px; } .vimeoBadge .s80 { width: 80px; } .vimeoBadge .s100 { width: 100px; }
</style><div id="badge">
<div class="vimeoBadge horizontal">
<script src="https://vimeo.com/pablokozatch/badgeo/?script=1&badge_layout=horizontal&badge_quantity=8&badge_size=200&badge_stream=uploaded&show_titles=no"></script>
</div>
</div>
And this is the CSS that I am using to style the image gallery:
body {
width: 80%;
margin: 30px auto;
font-family: sans-serif;
}
h3 {
text-align: center;
font-size: 1.65em;
margin: 0 0 30px;
}
div {
font-size: 0;
}
a {
font-size: 18px;
overflow: hidden;
display: inline-block;
margin-bottom: 8px;
width: calc(50% - 4px);
margin-right: 8px;
}
a:nth-of-type(2n) {
margin-right: 0;
}
#media screen and (min-width: 50em) {
a {
width: calc(25% - 6px);
}
a:nth-of-type(2n) {
margin-right: 8px;
}
a:nth-of-type(4n) {
margin-right: 0;
}
}
a:hover img {
-webkit-transform: scale(1.15);
}
a.overlaylogo:hover {
background-color:none;
color:#000;
text-decoration:none;
}
figure {
margin: 0;
}
img {
border: none;
max-width: 100%;
height: auto;
display: block;
background: #ccc;
transition: -webkit-transform .2s ease-in-out;
}
.p a {
display: inline;
font-size: 13px;
margin: 0;
}
.p {
text-align: center;
font-size: 13px;
padding-top: 8px;
}
The problem can be seen on the page in its current state here: http://pabloshead.com
The gallery I am trying to mimic is above the vimeo widget in its current state.
Thanks!

Answer 1

Just set .clip to display: inline-block;
.clip {
display: inline-block;
}
<div id="badge">
<div class="vimeoBadge horizontal">
<script src="https://vimeo.com/pablokozatch/badgeo/?script=1&badge_layout=horizontal&badge_quantity=8&badge_size=200&badge_stream=uploaded&show_titles=no"></script>
</div>
</div>

Answer 2

After many hours of trial and error I replicated the css that was controlling the gallery and adapted it to work with the Vimeo montage. It is not exactly the same, but uses the same approach to create an inline-block image gallery with the desired effects.
Anyone who would like to replicate this script to better display their Vimeo montage is welcome to take it as I did not create it in the first place. Keep in mind that your montage must be set up as horizontal and with the highest image size which is 200px.
Here is the script:
body {
margin: 0;
padding: 0;
}
.vimeoBadge img {
min-width:100%;
max-width:100%;
height:auto;
transition: -webkit-transform .2s ease-in-out;
}
.vimeoBadge .clip {
display:inline-block;
width:25%;
}
.vimeoBadge div{
margin-right:0px;
}
.vimeoBadge .clip a {
font-size: 18px;
overflow: hidden;
display: inline-block;
width: 100%;
}
a:hover img {-webkit-transform: scale(1.15)}
#media screen and (max-width: 50em) {
.vimeoBadge .clip {
width:50%;
}
}