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.



enter image description here



If browser was small, it works perfectly.



But when I increase browser size,



enter image description here



<section> invade <footer>


<section>


<footer>



Is there any way to prevent it?



Thanks.





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


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.

-

Popular posts from this blog

.name

Image
.name From Wikipedia, the free encyclopedia Jump to navigation Jump to search name Introduced 2001 TLD type Generic top-level domain Status Active Registry Verisign Sponsor None Intended use Personal sites of individuals Actual use Mostly used as intended. Registration restrictions No prior restriction on registration, but registrations can be challenged if not by or on behalf of individual with name similar to that of domain, or fictional character in which registrant has rights Structure Originally registrations had to be at third level, in form john.smith.name , but later direct second-level registrations were allowed Documents ICANN registry agreement Dispute policies UDRP, Disputes Registry Website Verisign .name Registry The domain name is a generic top-level domain (gTLD) in the Domain Name System of the Internet. It is intended for use by individuals for representation of their personal name, nicknames, screen names, pseudonyms, or...
Read more

Malaysia to Papua New Guinea by motorcycle?

Image
10 Is it possible to ride from Malaysia to Papua New Guinea by motorcycle. Any help would be much appreciated. transportation malaysia motorcycles papua-new-guinea share | improve this question edited Dec 12 '16 at 8:01 Mark Mayo ♦ 129k 76 569 1289 asked Dec 12 '16 at 7:26 Gareth Gareth 54 1 3 13 Um, no not unless your motorcycle flies. There's water in the way. – Roddy of the Frozen Peas Dec 12 '16 at 7:42 I presume the route is somehow Malaysia-East Timor-Darwin Australia and on. But even these fine fellas abikejourney.com have flown from Singapore to Australia. With the increasing difficulty in freighter tourism, this will be at least very challenging. – chx Dec 12 '16 at 10:01 add a comment  |  10 Is it possible to ride from Malaysia to Papua New Guinea by motorcycle. Any help would be much appreciated. transportation malaysia moto...
Read more

List of Bhojpuri films

Image
List of Bhojpuri films From Wikipedia, the free encyclopedia Jump to navigation Jump to search List of Bhojpuri films : Contents 1 1950 to 1970 2 1980-89 3 1990-99 4 2000-2013 5 2014 6 2015 7 2016 8 2018 9 See also 10 External links 1950 to 1970 [ edit ] Aael Basant Bahar Balma Bara Nadan Bhouji (1965) Bidesiya (1963) Bidhana Nach Nachawe Ganga (1965) Ganga Maiyya Tohe Piyari Chadhaibo (1962) Goswami Tulsi Das Hamar Sansar Jekra Charanwa Me Lagale Paranwa Kab Hoihen Gawanwa Hamar Laagi Nahi Chhute Ram (1963) Loha Singh (1966) Nagpanchami Naihar Chhootal Jay Saiyan Se Bhaele Milanwan Sita Maeya Solhon Singar Kare Dulhaniya Toofan ayo langdo bhaago Hamar Betwa 1980-89 [ edit ] Aanchara Ke Laaj Aangan Ki Laxmi Babua Hamar Bahina Tohare Khatir Bahuria Bairi Kangana (1983) Bairi Sawan Baje Shahanai Hamar Angna Balma Nadan Bansuriya Baje Gangateer Bhaiya Bhaiya Dooj Bihari Babu Biraha Ki Raat Bitiya Bhail Sayan Bitiya Chalal Sasu...
Read more