I created a website and utilized flexbox for designing the layout.
The page structure is quite simple, consisting of only 3 tags:
<header>
<section>
<footer>
[index.html]
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="header__left">
<span>Email here or call</span>
</div>
<div class="header__center">
<img src="img/logo.png">
</div>
<div class="header__right">
<a href="#">About us</a>
<a href="#">Our Work</a>
<a href="#">Our People</a>
</div>
</header>
<section>
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
<img src="./img/dummy.jpg" alt="Sample photo">
</section>
<footer>
THIS IS FOOTER
</footer>
</body>
</html>
[style.css]
html, body {
padding: 0;
margin: 0;
}
header {
display: flex;
height: 70px;
}
.header__left {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.header__center {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.header__right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
section {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
max-height: 100vh;
}
section img {
max-width: 25vw;
}
Additionally, I included max-width: 25vw; to showcase 4 images per row.
Upon entering the site, the layout appears as shown in this screenshot: https://i.sstatic.net/8WJrl.png
Everything seems to work well on smaller browser sizes. However, upon enlarging the browser window,
This issue arises where the <section> element overlaps with the <footer>.
Do you have any recommendations on how to avoid this problem?
Thank you.