I'm working on my activity website and I currently have problem with the image in my about section with its responsiveness. I'm trying to change my image where when I minimize the browser, the image will also adjust to smaller but I can't find way to adjust it and make it responsive. Kindly help me.
#abouts {
background: #07414C;
display: inline-block;
width: 100%;
}
.about{
padding: 100px 0px;
background-color: #033541;
}
.about .about-picture img {
width: 430px;
}
.about-text{
width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2{
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5{
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p{
color: white;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
.about .main {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
}
.about .about-picture img {
max-width: 100%;
height: auto;
}
.about .main .about-text h5 {
width: 100%;
font-size: 18px;
text-align: center;
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.about .main .about-text h2 {
width: 100%;
font-size: 50px;
text-align: center;
padding-right: 1.8rem;
padding-left: 1.8rem;
}
.about .main .about-text p {
width: 100%;
font-size: 15px;
text-align: justify;
padding-right: 2.8rem;
padding-left: 2.8rem;
}
}
<!----about start---->
<div id = "abouts">
<section class="about">
<div class="main">
<div class = "about-picture">
<img src="aboutpic.jpg">
</div>
<div class="about-text">
<h2>About Me</h2>
<h5>word 1<span>, word 2, and word 3</span></h5>
<p>Name, age, place. school where im studying. things that i love. motto.</p>
</div>
</div>
</section>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
The max-width
should be defined in pixel, not the simple width
.
And it's enough to make it fluid, no need for extra media query code.
.about .about-picture img {
width: 100%;
max-width: 430px;
}