I'm having difficulty leaving a page with responsive bootstrap, with the full screen it is correct:
NowwhenItrytoseehowyouarerespondingonsmallerdevices,mycaruselisnotresponsive:
Hereisthecarcode:
<divid="myCarousel2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
<li data-target="#myCarousel2" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img\corpo1.png" alt="Chania" class="img-responsive">
<div class="carousel-caption">
<div class="row text-center">
<div id="reportagem1" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<h1 >Baixa auto estima ansiedade</h1>
<p>A ansiedade é um mal que acompanha gerações há anos. A sensação de desconforto não chega a ser classificada como uma doença, mas sim como um sintoma preocupante...</p>
<a class="" target="_blank" href="reportagens/LM_BAIXA_AUTO_ESTIMA_ANSIEDADE.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
<div id="reportagem2" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<h1>Caminhada</h1>
<p>A caminhada é um dos exercícios mais populares, principalmente em quem quer perder peso. Até porque ela é um exercício eficaz e de baixo impacto, ideal para quem está acima do peso...</p>
<a class="" target="_blank" href="reportagens/LM_CAMINHADA.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="img\corpo1.png" alt="Chania">
<div class="carousel-caption">
<div class="row">
<div id="reportagem3" class="col-xs-6 col-sm-6 col-md-4 col-lg-6 text-center">
<h1>Dieta de frango e batat</h1>
<p>É comum que muitas pessoas associem alimentos integrais como menos calóricos (confundindo-os frequentemente com produtos “light”), entretanto, é importante destacar que os alimentos integrais não necessariamente possuem menos calorias do que as suas versões refinadas....</p>
<a class="" target="_blank" href="reportagens/LM_DIETA_FRANGO_BATATA_FUNCIONADIDADE.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
<div id="reportagem4" class="col-xs-6 col-sm-6 col-md-4 col-lg-6 text-center">
<h1>Diferença entre alimento normais e integrais</h1>
<p>É comum que muitas pessoas associem alimentos integrais como menos calóricos (confundindo-os frequentemente com produtos “light”), entretanto, é importante destacar que os alimentos integrais não necessariamente possuem menos calorias do que as suas versões refinadas...</p>
<a class="" target="_blank" href="reportagens/LM_DIFERENCA_ENTRE_ALIMENTOS_INTEGRAIS_NORMAIS.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="img\corpo1.png" alt="Chania">
<div class="carousel-caption">
<div class="row">
<div id="reportagem5" class="col-xs-6 col-sm-6 col-md-4 col-lg-6 text-center">
<h1>Educação no transito</h1>
<p>Respeito, cortesia, cooperação, solidariedade e responsabilidade constituem os eixos determinantes da transformação do comportamento do homem no trânsito. E, por isso, devem ser passados de geração a geração...lorem</p>
<a class="" target="_blank" href="reportagens/LM_EDUCACAO_NO_TRANSITO.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
<div id="reportagem6" class="col-xs-6 col-sm-6 col-md-2 col-lg-6 text-center">
<h1>Canela emagreçe e combate colesterol</h1>
<p>A canela possui uma série de benefícios. Ele ajuda a prevenir e combater o diabetes, controlando os níveis de açúcar no sangue e aumentando a sensibilidade à insulina...</p>
<a class="" target="_blank" href="reportagens/LM_CANELA_EMAGRECE_CONTROLA_COLESTEROL.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
</div>
</div>
</div>
<div class="item">
<img src="img\corpo1.png" alt="Chania">
<div class="carousel-caption">
<div class="row">
<div id="reportagem7" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<h1>Halitose</h1>
<p>Halitose, mais conhecida como mau hálito, é um embaraçoso problema de higiene que ninguém quer ter, mas a maioria de nós tem de vez em quando. Para descobrir como curar o mau hálito, deve-se entender o que o causa...</p>
<a class="" target="_blank" href="reportagens/LM_HALITOSE.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
<div id="reportagem8" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 text-center">
<h1>Menigites</h1>
<p>A meningite é uma infecção muito comum em adultos e crianças, mas podeser causada por diferentes agentes - vírus, bactérias, fungos, parasitas e até mesmo a bactéria da tuberculose. Isso faz com que existam diferentes tipos da doença, que pedem cuidados diferentes. Saiba como comparar os tipos de meningite.</p>
<a class="" target="_blank" href="reportagens/LM_MENINGITES_capa.pdf" role="button"><button class="but">LER MAIS</button></a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a
CSS:
@charset "UTF-8"
@font-face {
font-family: custom;
src: local('../fonts/akuma.ttf'), url('../fonts/akuma.ttf');
}
body {
font-family: custom;
}
.text-center .img-responsive {
margin: 0 auto;
}
.but {
display: inline-block;
background-color: #c9302c;
color: #fff;
padding: 10px 20px;
text-decoration: none;
box-sizing: border-box;
font-size: 14px;
border: 0px;
}
#navbar {
background-color: rgb(51, 51, 51);
border-color: rgb(51, 51, 51);
}
#myCarousel {
margin-top:-20px;
}
#new-text {
background-color:#D9D9F3;
}
#artigo {
text-align:center;
}
#contact {
padding-left:200px;
background-image: url(../img/corpo2.png);
}
#midias {
background-image: url(../img/corpo2.png);
text-align:center;
width: 100%;
}
#empresa {
background-color:rgb(51, 51, 51);
height: 59px;
}
#promocoes {
text-align: justify;
}
#elyzium {
text-align:right;
background-color:rgb(51, 51, 51);
height: 59px;
}
#rodape {
width: 100%;
bottom: 0;
}
#scrol-top {
font-size: 30px;
}
#botaotopo {
position: fixed;
right: 20px;
bottom: 20px;
cursor: pointer;
}
li:hover {
background-color: red;
}
#reportagem1 {
text-align: justify;
}
#reportagem2 {
text-align: justify;
}
#reportagem3 {
text-align: justify;
}
#reportagem4 {
text-align: justify;
}
#reportagem5 {
text-align: justify;
}
#reportagem6 {
text-align: justify;
}
#reportagem7 {
text-align: justify;
}
#reportagem8 {
text-align: justify;
}