Html - align the elements inside the container

JuliaBland299
October 6, 2023
163 views
2 votes
3 Answers

I don’t understand how I can get the correct positioning inside the container.

I need to have the text on the left and the photo on the right and on a small device triggered flex-direction:column; when the picture down stretched. hint please.
I somehow do not get either the text behind the photo goes when it should not be so or some nonsense turns out. I’m just learning.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
display: flex;
  justify-content:center;
  top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);    position: absolute;
}
.wrappper {
  
    width: 800px;
  height: 500;
  padding: 2vmin;
  background-color: pink;
  border-radius: 20px;
  overflow: hidden;
}
.text h1 {
  font-size: 17px;
}
.text p {
  font-size: 15px;
}
.text a {
      text-decoration: none;
  padding: 7px 25px;
    border-radius:10px;
  color: #fff;
  background-color: blue;
}
.photo img {
  width: 200px;
  height: 200px;
}

<div class="container">
  <div class="wrappper">
    <div class="text">
    <h1>Test text</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id modi maxime sit dolorem tempora! Ea porro ipsum earum perspiciatis maiores, distinctio, accusamus voluptatibus repellat magni sint exercitationem quia. Tenetur, porro!</p>
    <a href="#!">test button</a>
  </div>
  <div class="photo">
    <img src="https://framerusercontent.com/images/CMlJeFc6gnfpf0Q18wwTFJ570Vw.png" alt="">
  </div>
  </div>
</div>

Answers

- MashaBaranova
- October 6, 2023 at 9:50 am
- 0 votes
0
You need to use media-queries https://developer.mozilla.org/en-US/docs/Web/CSS/@media and style the elements according to the size of the screen

Login or Signup to reply.

- JamesB
- October 6, 2023 at 2:14 pm
- 0 votes
0
Layout Desktop

You can achive at least the start of what you’re looking for here just using flexbox and width. Using a flexbox row alongside width: 50% for your contents should achive the two column effect you’re looking for.

Layout Mobile

Through media queries you can achive changing the flex direction and the content widths based on the viewport width.

Example Stylesheet

Hopefully this minimal example can give you something to expand from.
```
.wrappper {
    width: 800px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.text {
    width: 50%;
}

.photo {
    width: 50%;
}

.photo img {
    width: 100%;
}

@media (max-width: 800px) {
    .wrappper {
        flex-direction: column;
    }

    .text {
        width: 100%;
    }

    .photo {
        width: 100%;
    }
}
```
Login or Signup to reply.