html - content not resizing to full width within jumbotron -
i'v been trying couple of days fix on own; apparently more complicated expected.
what want achieve: want both iframes use full heigth , width of screen. have been abble make iframes use full heigth making div enclosing video 100% heigth on css. cant seem make strech use full width.
after i'm facing new problem, chat iframe getting moved below video iframe.
thank patience!
this code.
body { font-family: 'gloria hallelujah'; font-weight: 300; } .jumbotron { display: flex; align-items: center; background-image: url('jumbobg.png'); background-size: cover; color: #ffffff; text-shadow: 0.25px 0.25px 0.25px #000000; padding: 0px; padding-left: 0px; padding-right: 0px; } .twitchvideo { width: 100%; height: 100%; } .twitchchat {} .nopadding { padding: 0 !important; margin: 0 !important; } .nomargin { margin: 0 !important; padding: 0 !important; }
<html> <head> <title>....</title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <link href='https://fonts.googleapis.com/css?family=gloria+hallelujah' rel='stylesheet' type='text/css'> <link rel="stylesheet" type="text/css" href="twitch.css"> </head> <body> <section class="jumbotron "> <div class="container nomargin"> <div class="row"> <div class="twitchvideo embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="https://player.twitch.tv/?channel=lirik" frameborder="0" scrolling="no"></iframe> </div> <div class="twitchchat"> <iframe class="embed-responsive-item" src="https://www.twitch.tv/lirik/chat?popout=" frameborder="0" scrolling="no"></iframe> </div> </div> </div> </section> </body> </html>
Comments
Post a Comment