@media does not change content

Asked

Viewed 39 times

0

Good

I was trying to make the responsive of a website but when I went to change things to mobile just did not change anything and I do not know how to solve.

I have a script that makes my carousel work but I think it’s bugging me.

the script is this:

window.location = "#img1";

also may not be but I’m pretty sure it is, below this I’ll attach my code and if you notice my @media that should hide the first class called "header-1" does not hide... and I have tried several ways and I have tried also on other objects but also are not modified...

If anyone can help me here is my code:

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

javascript html css

  • @media is working normal. The .header-1 is being hidden from 600px down.

  • @Sam in theory yes but in my page is not hiding, already closed and I opened the visual studio code I did several things but from 600px down to me remains the same, I will post an image to show how it looks

1 answer

3


Missed putting the meta viewport in the head. For example:

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

The options of content you arrow what best suits you. You can use this topic as a reference or web search several articles on the subject.

  • 1

    It worked!!! Arigato Sam!!! kkkkkk

Browser other questions tagged javascript html css

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