0
       <h1> Nuestros servicios más demandados</h1>
       <ul>
           <li>
            <h2>Maquillaje Profesional</h2>
               <img src="./img/novia 1.jpg" alt="maquillaje novia">
               <img src="./img/maqui1.jpg" alt="maquillaje">
               <img src="./img/image_6483441 (1).JPG" alt="maquillaje de novia">
            <p> ¿ Te hace falta contratar un maquillaje para alguna ocasión especial ? En NESE BEAUTY STUDIO estamos a tu disposición, puedes consultarnos sin ningún compromiso.
            </p>
           </li>
       </ul>
    </div>`

Estoy poniendo un fondo al container1 pero no consigo hacerlo responsive.

    background: linear-gradient( 130deg,#e9dcef,#30045d,#e9dcef,#30045d);
    width: 1620px;
    height: 800px;
    position: relative;
    top: 500px;
}

.container1 h1{
    text-align: center;
    background: linear-gradient( 130deg,#e9dcef,#7023bd,#30045d,#e9dcef);
    box-shadow: 3px 3px 9px whitesmoke;
    bottom: 100px; 
    width: 1620px;
    position: relative;
    font-size: 40px;
    color: #dab6fc;
}

.container1 ul{
    display: flex;
    flex-wrap: wrap;
    bottom: 90%;
    position: absolute;
    width: 1100px;  
    height: 50px;
    left: 30px;  
}
.container1 ul li{
    width: 1000px; 
    height: 50px;
    list-style: none;   `introducir el código aquí`
    position: relative;
    display: flex;
    gap: 180px;
}
.container1 ul li img{
    border: solid 2px #1e0033;
    box-shadow: 3px 3px 9px #1e0033;
    padding: 0;
    position: relative;
    top: 100px;
    display: flex;
    left: 30px;
    width: 450px;
    height: 511px;
}
.container1 ul li h2{
    color: #dab6fc;
    width: 400px;
    position: absolute;
    left: 560px;
    font-size: 30px;
    border-radius: 25px; 
    box-shadow: 3px 3px 9px whitesmoke;
    text-align: center;
    top: 10px;
}
.container1 p{
    position: absolute;
    font-size: 22px;
    color:#0f001a;
    top: 660px;
    width: 1600px;
    left: 0;
}
@media screen and (max-width: 820px){
    .container1 {
        max-width: 100%; 
        height: 200vh;
        border: solid yellow 3px;
        top: 400px;
        background: linear-gradient(130deg, #30045d, #30045d,#e9dcef, #e9dcef,#30045d);
        

    }
    .container1::after{
        display: block;
        padding-bottom: 100%;
    }
    .container1 h1 {
        text-align: center;
        background: linear-gradient(130deg, #e9dcef, #30045d, #30045d, #e9dcef);
        box-shadow: 3px 3px 9px whitesmoke;
        width: 95%; /* Cambio importante: ancho máximo */
        font-size: calc(1em + 1vw);
        color: #dab6fc;
        margin: 0; /* Elimina el margen superior predeterminado */
        padding: 15px; /* Añade espacio de relleno */
        border: solid red 3px;
        bottom: 80px;
        
    }
    
    .container1 ul {
        
        border: solid blue 4px;
        display: flex;
        flex-direction: column;
        width: 100%;
        left: 0;
        padding: 0;
    }
    
    .container1 ul li {
        display: flex;
        flex-direction: column;
        border: solid skyblue 3px;
        bottom: 70px;
        width: 100%;
        left: 0;
        row-gap: 20px;

    }
    .container1 ul li img {
        border: solid green 3px;
        width: 75%;
        height: auto;
        
    }
    .container1 ul li img:nth-child(2){
        border: solid orange 2px ;
    }
    
    .container1 ul li h2 {
        color: #dab6fc;
        position: absolute;
        width: 80%; /* Cambio importante: ancho máximo */
        font-size: calc(1em + 1vw);
        border-radius: 25px;
        box-shadow: 3px 3px 9px whitesmoke;
        text-align: center;
        padding: 10px; /* Añade espacio de relleno */
        border: solid salmon 3px;
        top: 0px;
        left: 0;
        
    }
    
    .container1 ul li p {
        
        color: #0f001a;
        font-size: calc(1em + 1vw);
        border: solid olive 2px;
        max-width: 80%;
        top: 1380px;
        left: 20px;
        background-color: chocolate;
        margin:0px auto;
        
    }
}

En el web para ordenador puedo trabajar sin problema el fondo, en el container1, tengo puesto un background: linear-gradient lo tengo hecho y los hijos los puedo colocar donde quiero. El problema lo tengo al hacerlo responsive, el height no consigo que sea responsive el ancho me da problema no se adapta como lo quiero; el height pongo la medida pero no se hace responsive he probado todo ya, me he quedado sin ideas, para alguno sera muy facil seguramente espero alguna ayuda. Gracias!!

Nuevo colaborador
EndersJa es un usuario nuevo en el sitio. Tenlo en cuenta cuando preguntes por aclaraciones, comentes o respondas. Revisa nuestro Código de conducta.
1
  • Ya que tu código es HTML + CSS puedes crear un ejemplo mínimo verificable reproducible a través de un snippet, con el botón que indica <>. De hacerlo, no olvides reemplazar las rutas de las imágenes con URLs de generadores de imágenes, como dummyimage o placeholderimage.
    – padaleiana
    el 18 sep. a las 20:01

0

Tu Respuesta

EndersJa es un nuevo usuario. Sé cortés y por favor lee nuestro Código de conducta.

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.