how to make this page responsive
Question
when I try to resize the screen, the list next to the image goes out of the border and also the last image in the bottom of the page part of it goes out of the border, how can I make it responsive so it can goes down the image when the screen is small or medium, here's the code of the html page with css
h1 { text-align: center; } ul { list-style: none; } .flexcontainer { display: flex; align-items: center; } .container { padding-top: 1%; padding-bottom: 1%; margin-top: 1%; margin-bottom: 1%; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Employee's Page</title> <link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <h1>Ahmed Haiba</h1> <div class="container" style="border:1px solid #000000;"> <div class="flexcontainer"> <div> <img src="http://placehold.it/350x250"> </div> <div> <ul> <li> <h3>Full name: Ahmed Haiba</h3> </li> <li> <h3>Gender: Male</h3> </li> <li> <h3>Phone number: +9980989798</h3> </li> <li> <h3>Company: AST</h3> </li> <li> <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3> </li> </ul> </div> </div> <div> <h3>About employee:</h3> <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p> </div> <div> <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3> </div> <div> <img src="http://placehold.it/500x250"> </div> </div> </body> </html>
if you tried to resize the screen you will notice that only the list, goes out of the border and the last image in the bottom part of it goes out of the border , can you help me solve this problem ? I want the list to come down the image when the screen is resized
3 answers
solution1
5 ACCPTED 2018-10-08 01:37:33
First you'll want to add max-width: 100% to the img selector. This will prevent all images from going outside of their respective containers.
This also solves your problem with the text going outside the container, but will cause the top image to become rather small at narrow widths. To resolve this, I'd also recommend adding a media query (at say, 768px ) which removes display: flex from the .flexcontainer . I'd also recommend making it add text-align: center to the two <div> elements which contain the two images, in order to horizontally center them. I've given them the class .image to make this easier.
This can be seen in the following:
h1 { text-align: center; } ul { list-style: none; } .flexcontainer { display: flex; align-items: center; } .container { padding-top: 1%; padding-bottom: 1%; margin-top: 1%; margin-bottom: 1%; } img { max-width: 100%; } @media screen and (max-width: 768px) { .flexcontainer { display: block; } .image { text-align: center; } }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Employee's Page</title> <link rel="stylesheet" href="./assets/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <h1>Ahmed Haiba</h1> <div class="container" style="border:1px solid #000000;"> <div class="flexcontainer"> <div class="image"> <img src="http://placehold.it/350x250"> </div> <div> <ul> <li> <h3>Full name: Ahmed Haiba</h3> </li> <li> <h3>Gender: Male</h3> </li> <li> <h3>Phone number: +9980989798</h3> </li> <li> <h3>Company: AST</h3> </li> <li> <h3>Address: 661 Terrace Place, Elliott, Ohio, 9927</h3> </li> </ul> </div> </div> <div> <h3>About employee:</h3> <p>Id sint labore sint dolore ex laboris. Ea irure dolor est nulla laboris Lorem sint fugiat laborum officia commodo. Reprehenderit culpa non voluptate ea. Fugiat duis et deserunt ea enim et ipsum nostrud commodo quis quis laborum officia. Elit est anim quis deserunt nulla nostrud ea eiusmod quis adipisicing. Mollit exercitation officia ipsum ea aliqua amet aliqua esse amet minim. Ipsum quis cillum fugiat reprehenderit sit aliquip aute in excepteur dolore fugiat esse non non.</p> </div> <div> <h3>Employee was registered in the system: 2014-12-10T07:18:10 +02:00</h3> </div> <div class="image"> <img src="http://placehold.it/500x250"> </div> </div> </body> </html>
solution2
2 2018-10-08 01:43:20
You should use media query like this and make the display of .flexcontainer to display: block; .
try this: https://jsfiddle.net/o762ct48/
@media screen and (max-width: 767px){
.flexcontainer {
display: block;
align-items: center;
}
}
solution3
0 2018-10-08 10:56:11
If you want to make your page responsive you should also try to make the images in the page responsive to the viewport size.
The image which looks great in a large width display may not look good in small width display vice-versa.
This links will help you learn and understand how to make an image responsive:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.