htmlcssmedia-queries

Same images, same container but different sizes

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)

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>

<main>
<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>
</main>
<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: 500px;
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;
}

}[enter image description here][1]
Solution

  • The images' width is 100%, but the width of their siblings <p></p> is not set. The content of two <p> has different length. That is why they make the widths of their parents <div class="doctor> different.

    The solution could be to add to the .doctor rule a new one: width: 50%.

    I hope I have nudged you into understanding the problem.