Stuck On Build a Personal Portfolio Webpage

Please, i want to arrange the images as tiles, two columns. don’t know how to.
And also, how to center two texts at once on different lines.

<section>
<div id="projects">

<h2>These are some of my projects</h2>

<hr></hr>

<div class="project">

<div id="project-tile">

<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg">

<p>Tribute Page</p>
</div>

<div id="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"/>

<p>Random Quote Machine</p>
</div>

<div id="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"/>

<p>JavaScript Calculator</p>

</div>

</div>

</div>

</section>

That post only has your code. Can you describe what you need help with for your code

1 Like

You would do well in showing us your styles.css file too. In case you haven’t used it at all, then worry about the structure of your page first and once you get that done, start with its design. The display of images falls under the design category, for which CSS is necessary. HTML only structures the page.

:root{--viewport-color:#ff33;}

#navbar{width:100%; 
background-color:red; height:30px;top:0;
left:0;position:fixed;}

li{list-style-type:none;
display:inline; padding:10px; 
border-color:blue;}

ul{float:right;border-color:pink;
height:70%; margin:auto;}

a{text-decoration:none;
border-color:white;
 font-size:20px;}

*{border:2px solid black;}

#welcome-section{width:100%; height:100vh;
background-color:var(--viewport-color);
text-align:center;
line-height:100vh;}

#project-tile{width:50%;display:flex;flex-direction:row;
flex-wrap:wrap;justify-content:center;
align-items:center; padding:0 4px;}

#contact{width:100%; height:100vh; 
text-align:center; line-height:100vh;
background-color:var(--viewport-color);}

img{width:100%; height:250px;object-fit:cover;margin-top:8px;padding:0 4px;}

Just to make sure, is it currently showing as one column only? That might be because you gave them a width of 100%, though to be honest I’m not sure. Maybe try 50%.

yes, it’s showing as one column. I just changed it to 50% as you said, but it is still on a column

Have you tried using flexbox? I haven’t gotten as far as the Build a Personal Portfolio Webpage course, so I don’t know if you’ve been shown an alternative, but maybe flexbox is what you need.