[HTML] Adattare bordo al contenuto

[Lenigmista]

Salve,
ho inserito un gioco html5 all'interno di un bordo.
Il problema è che il bordo non si adatta alle dimensioni del gioco ma a quelle del layout.

qui il sito: http://giocare-online-gratis.blogspot.it/2017/06/snail-bob.html


Questo è il codice del gioco:

<div class="nomobile bordone">
<div class="giocone"><center>
<div class="gameplayer" data-gid="576742227280290427" data-height="600" data-sub="cdn" data-width="900">
</div>
<script>
(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'http://cdn.gameplayer.io/api/js/publisher.js'; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'gameplayer-publisher'));
 </script>
    
</center></div></div>

invece questo è il css del bordo:

.bordone {background: #FFF !important;
    border: 7px solid #0780b8 !important; margin: 0 auto;
margin-left: 0px;
border-radius: 10px 10px 10px 10px;
padding-bottom: 5px;
    padding-top: 5px;}

come potete vedere l'altezza si adatta bene a quella del gioco, infatti ho aggiunto i padding a 5px per distanziare un po' il gioco dal bordo. Ma per quanto riguarda la larghezza come dovrei fare?

Non voglio dare al bordo una larghezza fissa ma che lui si adatti in automatico dal momento che dovrò mettere altri giochi allo stesso modo.

 

[xone]

Prova a mettere la classe "bordone" qui:
<div class="gameplayer bordone">

 

[Lenigmista]

Quindi in linea di massima il problema è risolto.
basta che aggiungo class="bordone" non all'esterno ma all'interno di ogni iframe manualmente.

Un lavoraccio, ma meglio di niente.
Grazie Xone

 

[xone]

Di niente.

 

[xone]

Potresti anche eliminare la classe "bordone" ed assegnarla direttamente all'iframe in questo modo:

iframe {background: #FFF !important;
border: 7px solid #0780b8 !important; margin: 0 auto;
margin-left: 0px;
border-radius: 10px 10px 10px 10px;
padding-bottom: 5px;
padding-top: 5px;
}