I am using some flexbox basics to try this website for example, and I positioned some things in the place but when I change the size of the page with the console , there is no responsive working.
I’m struggling with a basic responsive and basic html after days.
HTML:
<title>
Vegan Cooking Retreat
</title>
<link rel="icon" type="favicon/x-icon" href="img/Vegan brocoli.png">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<header id="header">
<h1> Vegan Cooking Retreat</h1>
<nav id="menu">
<p><a href="#mission">Mission</a></p>
<p><a href="#news"> News</a></p>
<p><a href="#teammates"> Teammates</a></p>
<p><a href="#contacto"> Contact</a></p>
</nav>
</header>
<main>
<div id="mission">
<h2>
Mission
</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
<section id="news">
<h2>
News
</h2>
<section id="recipe">
<div id="dishes">
<h3>Appetizer</h3>
<a href="#"><img src="../Maquetacion-Vegan/img/appetizer.jpg" alt="Appetizer" width="184px" height="400px"></a>
</div>
<div id="dishes">
<h3>Main recipe</h3>
<a href="#"><img src="../Maquetacion-Vegan/img/main.jpg" alt="Main" width="184px" height="400px"></a>
</div>
<div id="dishes">
<h3>Dessert</h3>
<a href="#"><img src="../Maquetacion-Vegan/img/dessert.jpg" alt="Desserts" width="184px" height="400px"></a>
</div>
</section>
</section>
<div id="teammates">
<h2>Teammates</h2>
<div id="catarina">
<h3></h3>
</div>
<div id="camila">
<h3></h3>
</div>
</div>
</main>
<footer>
<div id="contacto">
</div>
</footer>
CSS :
@font-face {
font-family: “Dancing Script”;
src: url(‘fonts/DancingScript-VariableFont_wght.ttf’);
font-weight: normal;
font-style: normal;
}
html {
font-size: 16px;
}
body {
background-color: #B8AC6C;
font-family: “Dancing Script”;
height: 1200px;
}
#header {
display: flex;
flex-direction: column;
background-image: url(…/img/20200310_183359.jpg);
background-position: center 40%;
}
#header h1 {
display: flex;
font-size: 4rem;
color: #383521;
justify-content: space-evenly;
margin: 0 auto;
}
#menu {
display: flex;
font-size: 2rem;
justify-content: center;
gap: 5rem;
}
#menu a {
color: #383521;
text-decoration: none;
}
#menu a:hover {
color: blue;
}
main {
color: #383521;
display: flex;
flex-direction: column;
}
#news{
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
align-items: center;
}
#recipe{
display: flex;
}
#dishes{
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 40px;
}