Carrousel does not get responsive

Asked

Viewed 134 times

1

I’m having trouble leaving a page with responsive bootstrap, with the full screen it is correct: Site com a pagina full

When I test to see how it responds on smaller devices, my Carrousel is not responsive:

Visualização teste para aparelhos menores

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;
}
  • You can show the CSS code?

  • 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?

  • @Shutupmagda in my code is the same as in the topic passed above.

  • 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 :)

  • Thanks for your attention @Diogo Gomes, I will search any feedback posted in the forum the solution

Show 1 more comment
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.