Problem with overlapping images to the right side of div

Hello! I’m relatively new to frontend (only 1 month in) and I have a problem with my portfolio project

The problem is with the hero section. Basically, a hero section contains 2 parts of content - right with text and left with images. there is no problem with the first part but the second doesn’t seem to work the way it should.

There are 2 images. 1 - a photograph and 2 - a circle that should apper ‘behind’ the first one. pic 1 is what it should look like and pic 2 is how it looks now.


The code is:

   <main>
        <section class="hero">
            <div class="hero-container">
                <div class="left-col">
                    <h1>Аким Шабанов</h1>
                    <div class="junior-block">
                        <h3>Junior</h3>
                        <div class="line"></div>
                        <div>
                            <h5 class="padding">UX/UI Designer</h5>
                            <h5>Frontend Engineer</h5>
                        </div>
                    </div>
                </div>
                <div class="right-col">
                      <img src="resources/images/round.svg" class="circle" alt="Круг">
                      <img src="resources/images/Akim.png" class="Akim" alt="Аким Шабанов">
                </div>
            </div>
        </section>
        <section>

        </section>
    </main>

And

.hero {
    width: 100%;
    height: 406px;
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0F2027, #203A43, #2C5364);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0F2027, #203A43, #2C5364); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.hero h1, h3, h5 {
    color: white;
}
.hero-container {
    display: flex;
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
}
.left-col {
    
}
.junior-block {
    display: flex;
    align-items: center;
    margin-top: 31px;
}
.junior-block .padding {
    padding-bottom: 14px;
}
.line {
    width: 5px;
    height: 50px;
    background-color: white;
    margin-left: 26px;
    margin-right: 10px;
}
.right-col {

}
.circle {
    position: relative;
}
.person {
    position:absolute;

}

I have a feeling that the solution is quite easy and I’m juxt missing something. Thanks in advance!

P.S. I also found a strange thing with flexbox container. There is a additional space(?) to the right of the container. What could it be?

Thanks! :sparkling_heart:

Hi Akim,
Welcome to the forums!

You just set the parent element to display: flex. The Children don’t have a specific width. Then they just take the space they need, they don’t stretch by default. Align-items aligns children vertically. You’d have to use justify-content to align them horizontally. This is a good reference for flex boxes: CSS Tricks
Your portrait doesn’t have a corresponding class name. You styled the selector .person, but your image has the class Akim.
To center an absolute positioned element in its relative container you could use this:

left: 50%;
top: 50%;
transform: translate( -50%,  -50%);

Mirja, thanks for a reply!

Yes, I forgot to add ’justify-content’ on a flex container and I also messed up with class names. Fixed it
I also used ’inline-flex’ to align images and now it looks much better. thank you very much!

fixed code:

        <section class="hero">
            <div class="hero-container">
                <div class="left-col">
                    <h1>Аким Шабанов</h1>
                    <div class="junior-block">
                        <h3>Junior</h3>
                        <div class="line"></div>
                        <div>
                            <h5 class="padding">UX/UI Designer</h5>
                            <h5>Frontend Engineer</h5>
                        </div>
                    </div>
                </div>
                <div class="right-col">
                        <img src="resources/images/round.svg" class="circle" alt="Круг">
                        <img src="resources/images/Akim.png" class="person" alt="Аким Шабанов">
                </div>
            </div>
        </section>

and

.hero {
    width: 100%;
    height: 406px;
    background: #0F2027;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #0F2027, #203A43, #2C5364);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #0F2027, #203A43, #2C5364); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.hero h1, h3, h5 {
    color: white;
}
.hero-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1050px;
    margin: 0 auto;
}
.left-col {
    width: 443px;
}
.junior-block {
    display: flex;
    align-items: center;
    margin-top: 31px;
}
.junior-block .padding {
    padding-bottom: 14px;
}
.line {
    width: 5px;
    height: 50px;
    background-color: white;
    margin-left: 26px;
    margin-right: 10px;
}
.right-col {
    width: 330px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    

}
.circle {
    position: absolute;
    
}
.person {
    position: relative;
    padding-top: 8px;
}

Again. thank you!

2 Likes

Woah that’s a cool portfolio :sunglasses:

1 Like

Thank you!! :grinning: :grinning::grinning:

1 Like