0

Dentro de mi código CSS3 tengo el siguiente fragmento al final del documento:

@media (max-width:450px){
    .swiper-button-next,
    .swiper-button-prev{
        display: none;
    }
}

Este funciona perfectamente en ordenadores (los botones del slider desaparecen):

sto1

Pero no funciona en móviles (los botones del slider aparecen en lugar de ocultarse):

sto2

¿Por qué? Cualquier archivo de la web funciona perfectamente y no hay errores más allá de advertencias y fallos por algo de Google Maps (tengo implementado un mapa en la web) los cuales no dan ningún problema visible en la web.

Yo entiendo que max-width toma por referencia la ventana del navegador. Si el móvil tiene 350px de ancho en su pantalla, el navegador tendrá un máximo de 350px, lo cual es menor que 450px. Entonces, max-width debería funcionar, pero el navegador no lo interpreta bien y no sé por qué.

Sin embargo, el código funciona bien para móviles si cambio max-width por max-devide-width. Este arreglo trae dos problemas.

El primero es que max-device-width hace referencia a la pantalla del dispositivo y no a la ventana del navegador, luego debería hacer una copia de cada media query para hacer una versión "device" para cada una, lo cual es una mala práctica.

El segundo problema es que no se resuelve el problema original: max-width sigue sin funcionar aunque atribuya sus funciones a max-device-width.

Para que sea más fácil el estudio del caso, he simplificado mi código:

HTML5

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta viewport="width=device-width, initial-scale=1.0">
    <title>Restaurant01</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery-js/1.4.0/css/lightgallery.min.css">
    <link rel="stylesheet" href="./estilo.css">
</head>

<body>
    <!--Header section starts-->
    <section class="header">
        <a href="#home" class="logo"><i class="fas fa-utensils"></i>FOOD</a>

        <nav class="navbar">
            <a href="#home">HOME</a>
            <a href="#about">ABOUT</a>
            <a href="#food">FOOD</a>
            <a href="#gallery">GALLERY</a>
            <a href="#menu">MENU</a>
            <a href="#order">ORDER</a>
            <a href="#blogs">BLOGS</a>
        </nav>

        <div id="menu-btn" class="fas fa-bars">

        </div>
    </section>
    <!--Header section ends-->
    <!--Home section starts-->
    <section class="home" id="home">
        <div class="swiper home-slider">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide">
                    <div class="content">
                        <span>outstanding food</span>
                        <h3>delicious cooking</h3>
                        <a href="" class="btn">Get Started</a>
                    </div>
                </div>
                <div class="swiper-slide slide" style="background: url(./images/home-slide-2.jpg) no-repeat">
                    <div class="content">
                        <span>outstanding food</span>
                        <h3>morning moment</h3>
                        <a href="" class="btn">Get Started</a>
                    </div>
                </div>
                <div class="swiper-slide slide" style="background: url(./images/home-slide-3.jpg) no-repeat">
                    <div class="content">
                        <span>outstanding food</span>
                        <h3>authentic kitchen</h3>
                        <a href="" class="btn">Get Started</a>
                    </div>
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section>
    <!--Home section ends-->
</body>

CSS3

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600&family=Oswald:wght@200;300;400&display=swap');

@keyframes fadeIn{
    0%{
        transform: translateY(-4rem) scale(0);
        opacity: 0;
    }
}

:root{
    --peru: #cd9452;
    --black: #222;
    --white: #fff;
    --light-black: #666;
    --light-white: #ccc;
    --light-bg: #f5f5f5;
    --dark-bg: rgba(0,0,0,0.7);
    --border: 0.1rem solid #aaa;
    --box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

*{
    font-family: 'Dosis', sans-serif;
    margin:0;
    padding: 0;
    box-sizing: border-box;
    border:none;
    outline: none;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.43,1.1,0.62,1.08);
    text-transform: capitalize;
}

* > img{
    user-select: none;
    pointer-events: none;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

html::-webkit-scrollbar{
    width: 1rem;
}

html::-webkit-scrollbar-track{
    background-color: var(--white);
}

html::-webkit-scrollbar-thumb{
    background-color: var(--peru);
}

section{
    padding: 5rem 10%;
}

.header{
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--box-shadow);
    position: fixed;/*position: sticky;*/
    top: 0; left: 0; right: 0;
    background-color: var(--white);
    z-index: 1000;
}

.header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: var(--black);
}

.header .logo i{
    color: var(--peru);
    padding-right: 0.5rem;
}
.header .navbar a{
    font-size: 2rem;
    margin-left: 2rem;
    color: var(--light-black);
}

.header .navbar a:hover{
    color: var(--peru);
}

#menu-btn{
    font-size: 2.5rem;
    cursor: pointer;
    color: var(--black);
    display: none;
}

.home{
    padding: 0;
    background-color: var(--black);
}

.home .slide{
    min-height: 100vh;
    background: url(./images/home-slide-1.jpg) no-repeat;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home .slide::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--dark-bg);
    z-index: -1;
}

.home .slide .content{
    text-align: center;
    width: 70rem;
    display: none;
}

.home .swiper-slide-active .content{
    display: inline-block;
}

.home .slide .content span{
    font-size: 3rem;
    display: block;
    padding-bottom: 0.5rem;
    color: var(--light-white);
    animation: fadeIn 0.5s cubic-bezier(0.54,1.3,0.63,1.34) 0.3s backwards;
}

.home .slide .content h3{
    font-size: 8vw;
    text-transform: uppercase;
    color: var(--white);
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    line-height: 1;
    padding: 2rem 0;
    animation: fadeIn 0.5s cubic-bezier(0.54,1.3,0.63,1.34) 0.5s backwards;
}

.home .slide .content .btn{
    animation: fadeIn 0.5s cubic-bezier(0.54,1.3,0.63,1.34) 0.7s backwards;
}

.btn{
    margin-top: 1rem;
    display: inline-block;
    background-color: var(--peru);
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    padding: 1rem 3rem;
}

.btn:hover{
    letter-spacing: 0.2rem;
}

.swiper-button-next,
.swiper-button-prev{
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    background-color: var(--white);
    color: var(--black);
}

.swiper-button-next:hover,
.swiper-button-prev:hover{
    background-color: var(--peru);
    color: var(--white);
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 2rem;
}

@media (max-width:1200px){
    section{
        padding: 3rem 5%;
    }
}

@media (max-width:990px){
    section{
        padding: 3rem 2rem;
    }
    html{
        font-size: 55%;
    }
    .home .slide .content h3{
        font-size: 15vw;
    }
}

@media (max-width:750px){
    .header .navbar{
        position: absolute;
        top:99%; left:0; right:0;
        background-color: var(--white);
        border-top: var(--border);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    #menu-btn{
        display: inline-block;
    }
    .fa-times{
        transform: rotate(180deg);
    }
    .header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .header .navbar a{
        display: block;
        margin: 2rem;
    }
}

@media (max-width:450px){
    html{
        font-size: 50%;
    }
    .home .slide .content h3{
        font-size: 6rem;
    }
    .swiper-button-next,
    .swiper-button-prev{
        display: none;
    }
}

Así pues, ¿por qué en el móvil no desaparecen los botones del slider? Gracias.

2
  • 1
    has probado a quitarle el (max-width:450px) al @media que has puesto al principio? Con eso estás filtrando por tamaño del dispositivo, y seguramente en el móvil, tengas menos tamaño que ese, por lo que no entra
    – Maida
    Commented el 26 abr. 2022 a las 14:32
  • Por si acaso, he probado lo que dices y obviamente salta un error porque el media-query necesita de su parámetro entre paréntesis para funcionar. Si a ti te va bien así, me gustaría saber cómo lo hiciste porque lo mismo estoy omitiendo algo Commented el 26 abr. 2022 a las 21:12

1 respuesta 1

0

El único problema es la meta-etiqueta del viewport, la cual debería ser tal que:

<meta name="viewport" content="width=device-width, initial-scale=1">

Hecha la corrección, funciona perfectamente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.