Why won’t this section stay contained when I change my browser screen size? I used HTML and CSS. It looks fine when I made my screen full size but then if I make my browser smaller it doesn’t show the full content. (it only shows half of the image but shows the full text) screenshot of how it looks on smaller browser](https://i.stack.imgur.com/i9qiK.jpg)
.whoweare{
padding:80px 0px 50px;
background-color: #000000;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
}
.whoweare .content .box{
padding:5px;
flex:0 0 100%;
max-width: 100%;
}
.whoweare .content .item-img {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content .item-text h2{
font-size: 50px;
font-weight: 500;
margin:20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content .item-text p{
font-size: 20px;
line-height:50px;
color:#ffffff;
margin:20px;
padding:0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
.whoweare .content .class-items .item{
margin-bottom: 30px;
display: flex;
}
.whoweare .content .class-items .item .item-text{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
` <section id="whoweare">
<dic >
<div >
<div >
<div >
<div >
<div >
<img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" width="601"
height="751" />
</div>
<div >
<h2>Who we are</h2>
<p>Our gym provides a unique experience </p>
</div>
</div>
</section>````
CodePudding user response:
Change the height width of img tags.
Use % parameters
for example
height=50%
width=60%.
I think