responsive flexbox layout image overflow footer
responsive flexbox layout image overflow footer
I made some site and use flexbox for decorate layout.
Page structure is simple. Just 3 tags.
<header>
<header>
<section>
<section>
<footer>
<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;
And defined max-width: 25vw; to display 4 images on 1 row.
max-width: 25vw;
When I enterd the site, It looks like this.
If browser was small, it works perfectly.
But when I increase browser size,
<section> invade <footer>
<section>
<footer>
Is there any way to prevent it?
Thanks.
max-height: 100vh;
You could use bootstrap as well to achieve responsive design layout.
– Wini San
Sep 5 '18 at 6:14
2 Answers
2
Check this out!
Just you have to alter the height and width to 100%
https://jsfiddle.net/ksmLwngp/4/
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;
.imgbox
width:100%;
height: 100%;
<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>
<div class="imgbox">
<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">
</div>
</section>
<footer>
THIS IS FOOTER
</footer>
</body>
</html>
remove max-height: 100vh; example on fiddle
max-height: 100vh;
on the mobile your section with img has height more than 100vh
– Dmytro Lishtvan
Sep 5 '18 at 6:22
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
After remove
max-height: 100vh;it works fine. But, is there any another solution here, please comment it.– Hide
Sep 5 '18 at 6:13