I am trying to build my own portfolio website and I want it to be responsive. For the 'about me' section, I have placed my image on the left and a small introduction about myself on the right of the division. Now, when I reduce the screen size, I want my text to be placed below my image. Any idea how this can be done? Any help is appreciated.
Sorry for not posting the code earlier.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<div class="container2" id="container2">
<div class="intro">
<div class="column-img">
<!-- My image goes here -->
<img src="" alt="">
</div>
<div class="column-txt">
<h2>Hello.</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book.</p>
</div>
</div>
</div>
</body>
</html>
.container2 {
position: relative;
padding-top: 100px;
text-align: center;
padding-bottom: 80px;
background-color: #A8D0e6;
}
.intro{
background: #f76c6c;
padding-left: 25px;
padding-right: 25px;
position: relative;
box-sizing: border-box;
border-radius: 4px;
align-items: center;
max-width: 100%;
width: 70%;
margin: auto;
color: white;
display: flex;
height: 450px;
transition: 0.5s;
}
.intro .column-img img{
float: left;
margin-right: auto;
border-radius: 50%;
display: block;
margin-left: auto;
width: 320px;
height: 456px;
padding: 30px;
}
a simple way to do it would be to make the container/parent of your image and text to be set to flex, like so:
and then, for each of your items:
But, still recommend you show us a code snippet of your work.