0
I am developing a project for own study, thus creating the navigation pages of the same ended up finding a difficulty in responsiveness with videos since until the width 992 everything goes well below that the site breaks .
My question now is how to solve this problem since the Home page did not show any defect ,it has 3 articles as well as in the image with the difference of two forms instead of videos .
HTML5 code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dubla Blog</title>
<!-- Bootstrap -->
<link href="BootstrapV3/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/folhaDeEstilo.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="container col-sm-12 barraDeNavegacao">
<h1><span style="color: red" >Dubla</span>Blog</h1>
<div style="display: inline-block; float: right; margin-top: 16px">
<button type="button" class="navbar-toggle collapsed btn btn-default glyphicon glyphicon-list"
data-toggle="collapse" data-target="#menuLateral">
</button>
</div>
<nav class="navbar-right collapse navbar-collapse col-sm-4 col-xs-10 menuLateral" id="menuLateral">
<ul class="nav nav-tabs">
<li role="presentation" class="itemMenu " >
<a href="index.html" class="">Home</a>
</li>
<li role="presentation" class="itemMenu active">
<a href="#">Anime</a>
</li>
<li role="presentation" class="itemMenu">
<a href="cartoons.html">Cartoons</a>
</li>
<li role="presentation" class="itemMenu">
<a href="filmes.html">Filmes</a>
</li>
</li>
<li role="presentation" class="itemMenu">
<a href="doadores.html">Doadores</a>
</li>
</ul>
</nav>
</header>
<article class="container">
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">Entrevista Wendel Bezerra</h4>
<span class="postagem">Postado por : Henrique Duarte</span>
<figure>
<img src="imagens/wendel-bezerra-goku-300.png" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<div class="embed-responsive embed-responsive-4by3 tamanhoDoVideo">
<iframe class="embed-responsive-item" src="videos/Dubladores%20de%20Naruto,Sasuke,Sakura!%20(Storm4Dublado!).mp4"oncanplay="break"></iframe>
</div>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">O super Briggs</h4>
<span class="postagem">Postado por : Bruna Almeida</span>
<figure>
<img src="imagens/briggs-02-e1487326418720-essa.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<div class="embed-responsive embed-responsive-4by3 tamanhoDoVideo">
<iframe class="embed-responsive" src="videos/10%20CURIOSIDADES%20SOBRE%20A%20PROFISSÃO%20DE%20DUBLADOR.mp4"></iframe>
</div>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-6 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">É você Bulma ?</h4>
<span class="postagem">Postado por : Alex Duarte</span>
<figure>
<img src="imagens/Tânia%20Gaidarji-anime-220.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
</article>
<footer>
<hr>
<p style="text-align: center ;color: white">Projeto construido para estudo</p>
<p style="text-align: center;color: white" >Lucas Alves Cardoso de Jesus</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="BootstrapV3/bootstrap/js/bootstrap.min.js"></script>
</html>
css code
> @font-face{
> font-family: noticia;
>
> }
>
>
>
> /*-------------------------------------HEADER*/ header{
> background-color: white;
> height: 65px; }
>
>
> span.postagem{
> font-size: 12px;
> display: block;
> margin-top: -10px;
> margin-left: 5px; }
>
> header h1{ /* latter-spacing controlar espaço entre as letras*/
> display: inline-block;
> margin-top:24px; }
>
> header ul{ }
>
>
> header.barraDeNavegacao{
> height: 90px; } header nav{
> margin-top: 20px; }
>
> nav.menuLateral{
> font-size: 16px;
> margin-top: 37px; }
>
>
> /*----------------------------------BODY*/
>
> body{
> background: url("../imagens/microfundo.jpg") no-repeat;
> background-size: cover;
> background-position: 90% 80px; }
>
> section.conteudo{
>
> display: inline-block;
> position: relative;
> background-color: white;
> margin-top: 10px;
> overflow: hidden;
> border-right: 1px solid; }
>
> figure{
> margin:0px;
> text-align: justify;
> overflow: hidden;
> height: 241px;
> display: inline-block; }
>
> figcaption p{
> margin-left: 5px;
> margin-bottom: 5px; }
>
> figure img{
> float: left;
> margin-right: 5px;
> margin-left: 5px; }
>
> aside{
> float: right;
> margin-bottom: 96px;
>
> } aside.cadastro{
> color: white; }
>
> .embed-responsive-4by3 {
> padding-bottom: 57%; }
>
> button.botaoDoador{
> float: right;
> margin-top: 15px; }
>
> .tabela{
> padding-top: 12px;
> padding-bottom: 47px; }
>
> .contrate{
> background-color: #f6f0f6; }
>
> /*----------------------------------FOOTER*/
>
>
> hr{
> margin-top: 5px;
> margin-left: 44px;
> margin-right: 65px;
}
Page index
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Dubla Blog</title>
<!-- Bootstrap -->
<link href="BootstrapV3/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/folhaDeEstilo.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<header class="container col-sm-12 barraDeNavegacao">
<h1><span style="color: red" >Dubla</span>Blog</h1>
<div style="display: inline-block; float: right; margin-top: 16px">
<button type="button" class="navbar-toggle collapsed btn btn-default glyphicon glyphicon-list"
data-toggle="collapse" data-target="#menuLateral">
</button>
</div>
<nav class="navbar-right collapse navbar-collapse col-sm-4 col-xs-10 menuLateral" id="menuLateral">
<ul class="nav nav-tabs">
<li role="presentation" class="active itemMenu" >
<a href="index.html" class="">Home</a>
</li>
<li role="presentation" class="itemMenu">
<a href="anime.html">Anime</a>
</li>
<li role="presentation" class="itemMenu">
<a href="cartoons.html">Cartoons</a>
</li>
<li role="presentation" class="itemMenu">
<a href="filmes.html">Filmes</a>
</li>
</li>
<li role="presentation" class="itemMenu">
<a href="doadores.html">Doadores</a>
</li>
</ul>
</nav>
</header>
<article class="container">
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">Entrevista Wendel Bezerra</h4>
<span class="postagem">Postado por : Henrique Duarte</span>
<figure>
<img src="imagens/wendel-bezerra-goku-300.png" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-6 col-md-5 col-sm-5 col-xs-6 cadastro">
<h4>Quer se tornar um padrinho Dubla ?</h4>
<h5>Cadastra-se agora</h5>
<form>
<fieldset class="form-group">
<label for="nome">Nome :</label>
<input type="text" id="nome" class="form-control">
<label for="email">E-Mail</label>
<input type="email" id="email" class="form-control">
<label for="senha">Senha</label>
<input type="password" id="senha" class="form-control ">
<button class="btn btn-info botaoDoador" type="submit">Cadastrar</button>
</fieldset>
</form>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">O super Briggs</h4>
<span class="postagem">Postado por : Bruna Almeida</span>
<figure>
<img src="imagens/briggs-02-e1487326418720-essa.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
</p>
</figcaption>
</figure>
</section>
<aside class="col-lg-6 col-md-5 col-sm-5 col-xs-5 tabela">
<table class="table table-striped">
<thherd>
<tr>
<th>Doadores</th>
<th>Valor</th>
<th>Ano</th>
</tr>
</thherd>
<tbody>
<tr>
<th>Renan</th>
<th>R$ 350,00</th>
<th>2017</th>
</tr>
<tr class="contrate">
<th>Luis</th>
<th>R$ 1000,00</th>
<th>2018</th>
</tr>
<tr>
<th>Lucas</th>
<th>R$ 870,00</th>
<th>2017</th>
</tr>
<tr class="contrate">
<th>Ruan</th>
<th>R$ 800,00</th>
<th>2017</th>
</tr>
<tr>
<th>Lucas</th>
<th>R$ 670,00</th>
<th>2018</th>
</tr>
</tbody>
</table>
</aside>
<section class="conteudo col-lg-6 col-md-6 col-sm-7 col-xs-6">
<h4 style="display: inline-block; margin-left: 5px">É você Bulma ?</h4>
<span class="postagem">Postado por : Alex Duarte</span>
<figure>
<img src="imagens/Tânia%20Gaidarji-anime-220.jpg" class="img-responsive">
<figcaption>
<p>Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
Nullam hendrerit arcu sit amet posuere sagittis. Cras luctus iaculis placerat. Quisque semper ves
tibulum justo, at feugiat ligula. Nunc accumsan diam velit, vitae accumsan tortor tempus et. Pro
in blandit ullamcorper semper. Maecenas sed luctus sapien. Aenean rhoncus velit mauris, et vesti
bulum magna iaculis in. In metus eros, iaculis eget tortor non, cursus porttitor nibh. Vestibulum
tristique, nisl a consectetur eleifend, tellus enim dignissim mi, faucibus hendrerit ligula tell
us ac lacus. Maecenas eleifend malesuada dolor sit amet commodo.
</p>
</figcaption>
</figure>
</section>
</article>
<footer>
<hr>
<p style="text-align: center ;color: white">Projeto construido para estudo</>
<p style="text-align: center;color: white" >Lucas Alves Cardoso de Jesus</p>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="BootstrapV3/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Wow friend, you posted the code that is no problem! : D It would not be better to post the code with problem?
– Sam
But the problem is he’s not as responsive as over there in the picture getting all broken
– Lucas Alves
So it would not be better to put in question the code that is with the problem?
– Sam