Right now I'm building my first own portfolio website. But I have the following issue: I have text left to an image. But now I want that the text goes underneath the image when I scale down the website.
This is my code:
.myself {
display: grid;
margin: 100px 70px 0px 70px;
grid-template-columns: 1fr 1fr;
}
.location {
display: flex;
align-items: center;
width: 30vw;
margin-right: auto;
}
.location>img {
width: 35%;
height: auto;
}
.location h2 {
display: inline-block;
padding: 0px 0px 0px 20px;
margin-right: auto;
}
.age {
display: flex;
align-items: center;
width: 30vw;
margin-left: auto;
}
.age>img {
width: 45%;
height: auto;
}
.age h2 {
display: inline-block;
padding: 0px 20px 0px 0px;
text-align: right;
margin-left: auto;
}
<div class="me">
<div class="myself">
<div class="location">
<img src="./img/location.svg" alt="location icon">
<h2 class="bold">Based in <span class="purple"> Switzerland</span></h2>
</div>
<div class="age">
<h2 class="bold">I am <br><span class="purple">18 years</span> old</h2>
<img src="./img/person.svg" alt="person icon">
</div>
</div>
Here is the picture of the actual site:
And with a media query the text "I am 18 years old" should go under this "person icon". The solution which I use for the text left, works.
How do I do that?