0

I am remaking my portfolio and in the projects section I want the description on column and the project image on the other. I have used grids in the past without having an issue with the width of the columns and the spacing, but this time, I cannot figure out why the columns are of equal width.

HTML

<section class="projects">
      <h2 class="projects-title">Projects</h2>
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 project-desc">
          <h1>Tindog</h1>
          <p>An landing page for the Tindog app. A twist on a typical dating app.</p>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
            <img class="project-img-right" src="images/tindog.png">
        </div>
      </div>
      <div class="row">
        <div class="col-lg-6 col-lg-6 col-sm-12">
            <img class="project-img-left" src="images/3cardcomp.png">
        </div>
        <div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
          <h1>Tindog</h1>
          <p>An landing page for the Tindog app. A twist on a typical dating app.</p>
        </div>
        <div class="row">
        <div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
          <h1>Tindog</h1>
          <p>An landing page for the Tindog app. A twist on a typical dating app.</p>
        </div>
        <div class="col-lg-6 col-lg-6 col-sm-12">
            <img class="project-img-right" src="images/burgerstogo.png">
        </div>
        </div>
        <div class="row">
        <div class="col-lg-6 col-lg-6 col-sm-12">
            <img class="project-img-left" src="images/nftcard.png">
        </div>
        <div class="col-lg-6 col-lg-6 col-sm-12 project-desc">
          <h1>Tindog</h1>
          <p>An landing page for the Tindog app. A twist on a typical dating app.</p>
        </div>
        </div>
      </div>
    </section>

This is what I have created so far with HTML.I though a class of col-lg-6 would make all of these rows even but it's not working.

CSS

.row {
    position: relative;
}

.project-desc {
    padding: 2rem;
    margin: 3rem;
    width: 20%;
}
.project-img-right {
    width: 40rem;
    margin: 3rem;  
}

.project-img-left {
    width: 40rem;
    margin: 3rem;  
}

This is all I have done so far with this section in CSS.

Image of the project section created with Bootstrap 5 Grid

Image of the project section created with Bootstrap 5 Grid with inspection tools

I provide two images with of the project section to explain what it looks like currently. I would like each column to take up 50% of the row.

Amaya
  • 11
  • 4
  • Try removing all the width instructions from your CSS and see what happens. I do think that if you rely only on the `col-*-6` parts of your HTML then each column should indeed take up 50% of the screen. I think the widths you are adding to the CSS are messing about. Also, just a side note. As you move down your HTML, notice that you begin using two sets of `col-lg-6` on each Div. This is just a typo where one should be reading `col-md-6` I think. – Cutey from Cute Code Feb 04 '22 at 07:46
  • Thank you, that helped. I got rid of the width and was able to get it work properly. – Amaya Feb 04 '22 at 22:49

0 Answers0