[HTML] Adattare bordo al contenuto

Lenigmista

Utente Attivo
17 Set 2015
44
2
8
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:
Codice:
<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:
Codice:
.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.
 

Lenigmista

Utente Attivo
17 Set 2015
44
2
8
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

Utente Attivo
4 Apr 2014
180
14
18
Salento
Potresti anche eliminare la classe "bordone" ed assegnarla direttamente all'iframe in questo modo:

Codice:
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;
}
 
  • Like
Reactions: Lenigmista