How do i turn the project section to rows

HTML-CSS
1

I have been having this problem for a while now…
how do i make my project part of the section turn into rows instead of columns?

link: Codepen Link

@anon58011934 @jwilkins.oboe have the answer to the question:)

2

This is how you can get started with using flex.

<h2 class="center">Here are some of my projects</h2>
<section id="projects">
  <div>
    <p class="project-tile">Technical Documentaion</p>
    <a href="https://codepen.io/nianaz/pen/MWoeZaR" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/en/8/87/Safariscreenshot.PNG" width="25%" alt="image of a technical documentation"></a>
  </div>
  <div id="project">
    <p class="project-tile">Product Landing Page</p>
    <a href="https://codepen.io/nianaz/pen/yLXeBWR" target="_blank"><img src="https://cdn.pixabay.com/photo/2020/02/28/05/19/aesthetic-4886529_1280.jpg" width="25%" alt="image of a technical documentation"></a>
  </div>
</section>

.center {
  text-align: center;
}

#projects {
  display: flex;
}

Then it’s up to you to make adjustments to your liking.

1 Like
3

Hi,
You need to change the HTML part of the project to something similar to this one.

<div class="flex-container">
  <div>project1</div>
  <div>project2</div>
  <div>project3</div>  
 </div>

Then add the flex property to the flex container.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
1 Like
4

@jwilkins.oboe @anon58011934
I tried both of them, but they do not work… maybe I am doing something wrong?
link to the code: Codepen

5

@Kasakapen the code jwilkins has provided you is just what you need to make it work. You will have to edit your HTML and CSS files.

1 Like
6

You have a typo inside the #projects selector.

dispay, which should be display.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.