Same images, same container but different sizes

1

Hello. I have the same images set up within a container. I have set up a width (it´s suppose that this has to apply both of them) but in the end the right one looks bigger BUT this happens when it gets to the @media (min-width:1024px). I believe this is related with responsive. While we have the images under that size and in display: block is OK. When it turns display:flex the problem begins. Please anybody help me with this issue. It doesn´t has any sense. (evidence attached)

doctors
doctors1002×540 106 KB

HTML code:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Balance-Salud Mental</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width", user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1"/>
    <meta name="description" content="Tu salud mental es importante, cuidala con los profesiones adecuados. "/>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        
    <link rel="icon" href="img/favicon.png">
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/index.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap" rel="stylesheet"/>
</head>

<body>
<header>
    <div class="contenedor">
        <a href="index.html">
        <img src="img/logo.png" class="brand" alt="Salud Mental Peru">
        </a>
        
            
        <input type="checkbox" id="menu-bar">
        <label class="icon-menu-outline" for="menu-bar"></label>
    
        <nav class="menu">
        <a href="quienes_somos.html">¿Quienes Somos?</a>
        <a href="nuestros_profesionales.html">Nuestros Profesionales</a>
        <a href="consultas_citas.html">Consultas y Citas</a>
        <a href="blog.html">Artículos</a>
        </nav>
    </div>            
</header>

<section id=profesionales>
    <h2>Conócenos</h2> <br>
        <div class="contenedor">
            <div class="doctor">
            <h3>Manuel Mallqui Babilon</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo corrupti sed distinctio dolore. Veniam dicta error officiis sed. Aut, mollitia.</p>
            <img src="img/foto2.jpg" alt=""/>
            </div>    
            <div class="doctor">
            <h3>Manuel Mallqui Ñamot</h3>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora, vero ex accusamus temporibus maiores esse nihil facilis iusto laudantium aliquid.</p>
            <img src="img/foto2.jpg" alt=""/>
            </div>
        </div>
</section>

<footer>
    <div class="contenedor">
    <p>2018-2020 Balance Salud Mental &copy; - Designed by Watermelon</p>
    </div>
</footer>    
</body>
</html>

CSS code:

@import url(menu.css);
@import url(slider.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #9acd32;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='152' height='152' viewBox='0 0 152 152'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='temple' fill='%23ffffff' fill-opacity='0.17'%3E%3Cpath d='M152 150v2H0v-2h28v-8H8v-20H0v-2h8V80h42v20h20v42H30v8h90v-8H80v-42h20V80h42v40h8V30h-8v40h-42V50H80V8h40V0h2v8h20v20h8V0h2v150zm-2 0v-28h-8v20h-20v8h28zM82 30v18h18V30H82zm20 18h20v20h18V30h-20V10H82v18h20v20zm0 2v18h18V50h-18zm20-22h18V10h-18v18zm-54 92v-18H50v18h18zm-20-18H28V82H10v38h20v20h38v-18H48v-20zm0-2V82H30v18h18zm-20 22H10v18h18v-18zm54 0v18h38v-20h20V82h-18v20h-20v20H82zm18-20H82v18h18v-18zm2-2h18V82h-18v18zm20 40v-18h18v18h-18zM30 0h-2v8H8v20H0v2h8v40h42V50h20V8H30V0zm20 48h18V30H50v18zm18-20H48v20H28v20H10V30h20V10h38v18zM30 50h18v18H30V50zm-2-40H10v18h18V10z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

header {
    
    width: 100%;
    height: 80px;
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.contenedor {
    width: 98%;
    margin: auto;
}

.brand {
    width: 160px;
    margin: 3px 10px;
}

section {
    width: 100%;
    margin-bottom: 25px;
}

/*QUIENES SOMOS*/

#quienes_somos {
    text-align: center;
    margin-top: 100px;
    padding: 20px;
}

/*NUESTROS PROFESIONALES*/

#profesionales {
    border: 1px solid red;
    text-align: center;
    margin-top: 100px;
    
}

#profesionales .contenedor {
    border: 1px solid black;
    display: block;
    justify-content: center;
    
}

.doctor {
    margin: 20px;
}

.doctor img {
    width: 100%;
    max-width: 600px;
    padding: 10px;
}

/*FOOTER*/

footer .contenedor {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    font-size: small;
    margin-bottom: 50px;
    margin-top: 250px;
}

@media (min-width:1024px) {
    
    .contenedor {
        width: 1000px;
    }

    #profesionales .contenedor {
        display: flex;
    }

}
2

Hey, good effort pasting the code here, but it is better if you paste it on codepen.io or we can’t easily reproduce the result and the bug.

Once you do that, just update the OP including the URL

(we dont necessarily need the images, but if you can’t get them to work, better for you as you’d have learnt something new).

1 Like
3

Thanks @anon10002461 I am doing that right now. It is new to me as well.

4

You’re welcome. Please don’t take me wrong, I like the fact that you include the code in the post, but if there is a link to codepen too then that’s perfect. I’ve replied another one of your posts too.

1 Like