Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

martin wong
martin wong
4,799 Points
Posted by martin wong
martin wong
4,799 Points

Im trying to place 4 images in a flex container; 2 above and 2 below but my images keep exploding out of my box?

I have tried researching as to why this is but to no avail. My images were taken with a Mirrorless camera and imported onto my pc. On my workspace when i try to contain my image in the flexbox, the image is exploding out. My aim is to keep the image and text that describes the image within a box that has padding and a background color.

My code is: CSS body { background-color:#CCC; color:black; font-family: 'Raleway', sans-serif; font-size:1em; display: flex; flex-direction:column; border-color:black; border-style:solid; border-width:15px; margin:0; }

.header{ align-items:center; } .logo{ display:flex; font-size:1.5em; font-family:'sans-serif'; color:black; text-decoration:none; margin:80px auto 15px 20%; } .nav-bar { display:flex; flex-wrap:wrap; flex-direction:row; margin:0 auto; justify-content:center; width:250px; font-size:1em;

} li .col, .decor { text-decoration:none; color:white; font-size:1.2em; padding:10px;

} .col{ list-style:none; } ul li a.selected, .decor:hover{ color:black; } .intro{ display:flex; flex-wrap:wrap; margin:35px auto 0 20%; max-width:450px; justify-content:flex-start; }

.wrapper { display:flex; flex-flow:row; max-width:900px; justify-content:center; }

.container{ align-self:flex-start; overflow:hidden; padding:10px; max-width:100%; }

HTML

<!DOCTYPE html> <html lang="en">

<!--Title--> <head> <meta charset = "utf-8"> <title>Project of Martin Wong | HTML, CSS and Javascript</title> <link href="css/normalize.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="css/main.css" rel="stylesheet"> <link href="css/flexbox.css" rel="stylesheet"> </head>

<body> <!-- TOP HEADING LOGO AND NAV BAR--> <header class="header"> <a href="index.html" class="logo"> <h1>Martin Wong</h1>
</a> <ul class="nav-bar"> <li class="col"> <a href="index.html" class="selected decor">Portfolio</a> </li> <li class="col"> <a href="aboutme.html" class="decor">About me</a></li> <li class="col"> <a href="contact.html" class="decor">Contact</a></li> </ul> </header> <!------------------------------------------------------------------------>

<div class="intro"> <h2>Training my skills for the future</h2> <p>This is my journey to become a web developer. This website will tell my diary of my holiday that I went on in June</p> </div>

<!--IMAGES IN THE MIDDLE----------------------> <div class="wrapper"> <section> <ul id="wrapper"> <li class="container"> <a href="img/bro-and-me.jpg" class="container-image"> <img src="img/bro-and-me.jpg" alt="brother&me" class="img"> <p>A RARE half decent photo of me(right) and my brother(left) in Singapore. Photo taken by my father, And being ruined by mom walking into shot </p> </a> </li> <li class="container"> <a href="img/father.jpg" class="container-image"> <img src="img/father.jpg" alt="father" class="img"> <p>Father telling us a story while mom sniggers at a inside joke about our father</p> </a> </li> <li class="container"> <a href="img/mom.jpg" class="container-image"> <img src="img/mom.jpg" alt="mom" class="img"> <p>Mom feeling unwell on the journey to the big Buddha</p> </a> </li> <li class="container"> <a href="img/Park-plaza.jpg" class="container-image"> <img src="img/Park-plaza.jpg" alt="parkplaza" class="img"> <p>Park Plaza foodcourt. Cheap, delicious and quick-serving meals where I have many memories of</p> </a> </li> </ul> </section> </div>

</body>

Thank you!

2 Answers

Huzaifa Sajjad Malik
PLUS
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points
Huzaifa Sajjad Malik
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points

first make sure that your container has a display property of flex and the as the images are placed inside the container so they are its children so give all images the flex-basis property of 50%;

.container
{
  display:flex;
   width:100%;
}
img
{
  flex-basis:50%;
}
Huzaifa Sajjad Malik
PLUS
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points
Huzaifa Sajjad Malik
Huzaifa Sajjad Malik
Courses Plus Student 10,823 Points

please read the Markdown Cheatsheet and paste your code as described there because they way you are displaying the code right know is difficult to read.Any how moving forward with your question give all the images a flex-basis property of 50% so that they take half the sapce of the container on each row.