0

Boas

eu tava a tentar fazer o responsivo de um site mas quando fui alterar as coisas para telemovel simplesmente nao mudava nada e eu não sei como resolver.

eu tenho um script que faz com que o meu carrossel funcione mas eu acho que isso está me a bugar a pagina.

o script é este:

window.location = "#img1";

tambem pode não ser mas eu tenho quase a certeza que sim, em baixo disto vou anexar o meu codigo e se repararem o meu @media que devia esconder a primeira classe chamada "header-1" não esconde... e ja tentei de varias formas e tambem experimentei em outros objetos mas tambem nao sao modificados...

se alguem me poder ajudar aqui esta o meu codigo:

window.location = "#img1";
body {
    font-family: arial;
    background-color: rgb(243, 243, 243);
}

.menu-principal {
    background-color: rgb(216, 216, 216);
    height: 45px;
    width: 100%;
}

.logo img {
    margin-top: 2px;
    margin-left: 20px;
}

.logo {
    display: inline;
}

main {
    margin: 0 auto;
    width: 1100px;
    position: relative;
}

.redes-sociais {
    float: right;
    height: 35px;
    margin-right: 20px;
}

.redes-sociais li {
    float: left;
    margin-left: 5px;
}

.redes-sociais li img {
    height: 35px;
    width: auto;
    margin-top: 5px;
}

ul {
    list-style-type: none;
    margin: 0;
}

.menu-secundario {
    background-color: rgba(45, 189, 129, 0.438);
    width: auto;
    height: 60px;
}

.menu-secundario li {
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    height: 40px;
    width: 195px;
    padding-top: 20px;
    text-align: center;
    text-transform: uppercase;
}

.menu-secundario li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

a:link {
    text-decoration: none;
    color: black;
}

a:visited {
    color: black;
}

.header-1 {
    height: 45px;
}

/* carrossel */

.carrossel {
    margin-top: 60px;
}

.carrossel img {
    width: 1100px;
    height: auto;
}

.carrossel .img {
    display: none;
}

.carrossel .img:target {
    display: block;
}

.carrossel .b1 {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
}

.carrossel .b2 {
    position: relative;
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
}

.carrossel .b-V-A {
    position: absolute;
    margin: 580px 0px 15px 480px;
    font-size: larger;
}

.carrossel .seta-down img {
    width: 75px;
    height: auto;
    position: absolute;
    margin: 240px;
    display: none;
}

/* conteúdo */

.conti {
    height: 525px;
    width: auto;
}

.conti p {
    float: left;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 20px;
    padding: 10px;
    width: 60%; 
    line-height: 25px;
}

.conti h1 {
    float: right;
    text-align: center;
    width: 65%;
    height: auto;
}

.conti-img {
    background-image: url(../img/conti-img2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    width: 35%;
    height: 500px;
    margin-top: 10px;
    margin-bottom: 10px;
    float: left;
    position: relative;
}

/* footer */

footer {
    width: 100%;
    height: 400px;
    background-color: rgb(216, 216, 216);
}

.c1 img {
    width: 200px;
    height: auto;
}

.c1 {
    margin-top: 50px;
    width: 33%;
    position: relative;
    text-align: center;
    align-items: center;
    float: left;
}

.c2 {
    margin-top: 50px;
    width: 33%;
    position: relative;
    text-align: center;
    align-items: center;
    float: left;
}

.c2 h1 {
    font-size: 30px;
}

.c3 {
    margin-top: 50px;
    width: 33%;
    position: relative;
    text-align: center;
    align-items: center;
    float: left;
}

.c3 h1 {
    font-size: 30px;
}

/* Telemovel */

@media screen and (max-width: 600px) {

    .header-1 {
        display: none;
    }

    .menu-principal {
        background-color: none;
    }
}
<!DOCTYPE html>
<html>

<head>
    <title>Rio Lis</title>
    <link rel="stylesheet" type="text/css" href="../css/styles.css">
    <link rel="stylesheet" type="text/css" href="../css/normalize.css">
    <script src="../js/js.js"></script>
</head>

<body>
    <header class="menu-principal">
        <main>
            <div class="header-1">
                <div class="logo">
                    <a href="../html/index.html"><img src="../img/Logo-site-v1.png" height="42px" width="auto"></a>
                </div>
                <div class="redes-sociais">
                    <ul>
                        <li><a href="https://www.facebook.com"><img src="../img/face-logo2.png" /></a></li>
                        <li><a href="https://www.instagram.com"><img src="../img/insta-logo2.png" /></a></li>
                        <li><a href="https://www.twitter.com"><img src="../img/twitter-logo2.png" /></a></li>
                        <li><a href="https://www.youtube.com"><img src="../img/tube-logo2.png" /></a></li>
                    </ul>
                </div>
            </div>

            <div class="menu-secundario">
                <nav>
                    <ul>
                        <li><a href="">Historias</a></li>
                        <li><a href="">Linha temporal</a></li>
                        <li><a href="">Impacto da poluição</a></li>
                        <li><a href="">Percurso do rio</a></li>
                        <li><a href="">Jogo</a></li>
                    </ul>
                </nav>
            </div>
        </main>
    </header>
    <main>
        <div class="carrossel">
            <div class="img1 img" id="img1">
                <div class="seta-down">
                    <img src="../img/seta-down-conti-branco.png" alt="seta-down">
                </div>
                <div class="b-V-A">
                    <button class="b1"><a href="#img3">Voltar</a></button>
                    <button class="b2"><a href="#img2">Avançar</a></button>
                </div>
                <img src="../img/img_1_car.png" alt="img1">
            </div>
            <div class="img2 img" id="img2">
                <div class="b-V-A">
                    <button class="b1"><a href="#img1">Voltar</a></button>
                    <button class="b2"><a href="#img3">Avançar</a></button>
                </div>
                <img src="../img/img_2_car.jpg" alt="img2">
            </div>
            <div class="img3 img" id="img3">
                <div class="b-V-A">
                    <button class="b1"><a href="#img2">Voltar</a></button>
                    <button class="b2"><a href="#img1">Avançar</a></button>
                </div>
                <img src="../img/img_3_car.jpg" alt="img3">
            </div>

        </div>

        <div class="conti">
            <div class="conti-img"></div>
            <h1>Rio Lis</h1>
            <p>O Rio Lis é um rio português que nasce junto da povoação das Fontes, dois quilómetros e meio a Sul da
                freguesia de Cortes, a que pertence, ao distrito e concelho da cidade de Leiria. Esta cidade é banhada
                pelas suas águas onde se juntam às do Rio Lena.</p>
            <p>A poluição no rio lis que antes era usado para pescar, ensinar crianças a nadar e parcialmente como água
                potável, está a afetar o ambiente bem como os animais em que estão incluídos peixes, patos e gansos
                entre outros.</p>
            <p>Devido a esta mesma poluição hoje em dia já não é seguro nadar nestas águas nem consumir os peixes que
                nelas tem o seu habitat natural.</p>
        </div>
    </main>

    <footer>
        <main>
            <div class="c1">
                <img src="../img/Logo-site-v1.png" alt="logo-site">
            </div>
            <div class="c2">
                <h1>Desenvolvimento Web Multimédia</h1>
            </div>
            <div class="c3">
                <h1>Trabalho realizador por:</h1>
                <h3>David Vinagre <br> Yuness Al-hiyasat <br> Miguel Faria <br> Débora Codinha</h3>
            </div>
        </main>
    </footer>
</body>

</html>

inserir a descrição da imagem aqui

2
  • O @media está funcionando normal. O .header-1 está sendo escondido de 600px pra baixo.
    – Sam
    9/01/2020 às 20:03
  • @Sam em teoria sim mas na minha pagina não esta a esconder, ja fechei e abri o visual studio code ja fiz varias coisas mas de 600px para baixo para mim continua igual, vou afixar uma imagem para mostrar como fica
    – David Mv
    9/01/2020 às 20:06

1 Resposta 1

3

Faltou colocar o meta viewport no head. Por exemplo:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">

As opções do content você seta o que melhor lhe aprouver. Pode usar este tópico como referência ou pesquisar na web vários artigos sobre o assunto.

1
  • 1
    Resultou!!! Arigato Sam!!! kkkkkk
    – David Mv
    9/01/2020 às 20:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .