Problem with lists and images inside div

Hello everyone! It’s me again :heartbeat:

I’m still working on my portfolo project and stuck with some poblems.

  1. I’m having a hard time creating this layout

Expectation:

Reality:

I got the left part with text and buttons but the right part with images is giving me some troubles. I tried using flexbox, but images just doesn’t fit in the right part of the container. I also tried absolute and relative positioning but it appears to be difficult to calculate pixels. So I’m a little condused :grinning:
P.S.: I was considering using grids for this case but can’t figure out how to use rows and columns.

the code is:

HTML

  <section class="projects-container">
            <h2 class="projects-header">Проекты</h2>
            <div class="main-block">
                <div class="project">
                    <div class="project-left-col">
                        <h3>UX/UI исследования для Домодедово</h3> 
                        <ul class="projects-list">
                            <li>Составление портретов пользователя</li>
                            <li>Проработка CJM, User Stories</li>
                            <li>Редизайн страницы с учетом принципов Usability</li>
                        </ul>
                            <div class="btn-container">
                                <button href="#" class="project-btn white">
                                    Подробнее
                                </button><br>
                                <button href="index.html" class="project-btn purple">
                                    Макет в Figma
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="project-right-col">
                        <img src="resources/images/project1-1.jpg" alt="Изображение проекта">
                        <img src="resources/images/project1-2.jpg" alt="Изображение проекта">
                    </div>
                </div>
            </div>
        </section>

CSS

.projects-container {
    width: 1050px;
    height: 480px;
    margin: 0 auto;
}
.projects-header {
    padding-bottom: 42px;
}
.main-block {
    width: 100%;
    height: 400px;
    background-color: #FB5012;
    border-radius: 5px;
}
.main-block h3 {
    padding: 40px 0 20px 50px;
}
.list-container {
    width: 400px;
    height: 90px;
}
.projects-list {
    font-family: "Futura PT Book";
    color: white;
    padding-left: 50px;
}
.projects-list ul li {
    list-style-type: none;
}
.btn-container {
    margin-top: 50px;
    margin-left: 90px;
}
.project-btn {
    font-family: "Futura PT";
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 23px;
    border: none;
    border-radius: 5px;
    width: 150px;
    height: 40px;
    margin-bottom: 20px;
    cursor: pointer;
}
.white {
    background-color: white;
}
.purple {
    background-color: #7261A3;
    color: white;
}

  1. I need to put padding-left to the list block but the size of the block in the inspector doesn’t account the size of list bullets. So It’s quite difficult to calculate exact padding. Am i doing something wrong?

I also think that I messed up the amount of div containers in the html

Thanks! :heartbeat:

Hi Akim,

and it’s me again :slight_smile:

You want your card with the bio of Victoria to overlay the header. That means you do have to position it absolute.
The red header (.project) should be the relative container.

Remember my first post regarding the other header? I provided a snippet of how to center an absolute positioned element (transform: translate( -50%, -50%)). Here you don’t need to center it vertically, so you just need

transform: translateX(-50%);
left: 50%;

But this is tricky because you have to take care that it doesn’t get over the buttons on small viewports.

Try margin-left for the .projects-list instead of padding.

2 Likes

Thanks! It worked :grinning: :grinning: :grinning:

1 Like