1
I’m having trouble leaving a page with responsive bootstrap, with the full screen it is correct:
When I test to see how it responds on smaller devices, my Carrousel is not responsive:
The following is the code of the box:
<div id="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;
}
Behold: Different responsiveness between browsers (Webkit & Mozilla)
– ShutUpMagda
You can show the CSS code?
– Diogo Gomes
I posted the css, I couldn’t find it, @Diogo Gomes I wish I didn’t have to use the media-queries, would the other way?
– Michell Xexeu
@Shutupmagda in my code is the same as in the topic passed above.
– Michell Xexeu
Hmm I shouldn’t be the best person to give you other alternatives to media-querys because I’m not very advanced in these matters. I can give you the advice to try to search more deeply on google on various websites (this usually helps me). If you can’t solve the problem using the information on the internet I think it’s best to wait for someone more qualified to answer your question @Michell Xexeu :)
– Diogo Gomes
Thanks for your attention @Diogo Gomes, I will search any feedback posted in the forum the solution
– Michell Xexeu