0

I am working on a page for "The Team" and have three team members. Row 1 Column 1 is a image, Row 1 Column 2 is text, Row 2 column 1 is text, Row 2 Column 2 is a image, Row 3 Column 1 is a image, Row 3 Column 2 is text

So the images for the team members are diagonal of each other and the text is next to the image. All images are the same size. I want the corner of the images touching each other and all columns/rows to be the same size. Any help is appreciated :)

What I have:

screenshot

What I Want:

screen

With no-gutters:

no-gutters

 <body>
    <div id="team" class="container-fluid">
        <div class="row">
            <div class="col">
                <img src=".\images\name1_A0_Rectangle_8_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <span class="team-title">Developer</span>
            </div>
            <div class="col">
                <img src=".\images\name2_A0_Rectangle_10_pattern.png" alt="Image"/>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <img src=".\images\ProfilePicture_A0_Rectangle_12_pattern.png" alt="Image"/>
            </div>
            <div class="col">
                <span class="team-title">Designer</span>
            </div>
        </div>
    </div>
</body>
Devon Quick
  • 348
  • 1
  • 17
  • 1
    nope, I tried that before I asked the question (should have mentioned that, sorry) but I did it again just now. it brings them closer but not touching. ill update the question with a screenshot – Devon Quick Nov 02 '19 at 02:42
  • 1
    width: 100% css is what did it :) – Devon Quick Nov 02 '19 at 02:57

0 Answers0