width :768 이하 에서 세로로 정렬을 하고 싶습니다.
width가 768px 이하일 때 flex-direction :column; 작성 시 자식 div 가 세로로 정렬되길 기대했지만
이미지를 포함한 div가 다른 div 내용을 가립니다.
요약하자면 class="hcontainer" 에 flex-direction: column; 속성을 줬는데 이미지가 생각대로 동작을 안 합니다.
도와주세요
<body>
<div class="hcontainer">
<div class="hcontainer-content">
<div class="content-wrap">
<h1 class="ft">Landing Page for Apps</h1>
<p class="ft">Lorem ipsum dolor sit amet, consectetur adipisicing elit<br>
Voluptatum, rem, distinctio! Dolores doloremque.</p>
<button class="button">Show More</button>
</div>
</div>
<div class="hcontainer-content">
< img src="iphone.png" class="h-img">
</div>
</div>
</body>
----------------------------------------------------------------
.hcontainer{
background: linear-gradient(to bottom, blue, violet);
width: 100%;
height: 500px;
display:flex;
margin:0;
padding:10px;
box-sizing: border-box;
position: relative;
}
.hcontanier-content{
flex:1;
}
.button{
background-color: lightslategray;
color:white;
margin:auto;
width:20%;
height: 35px;
padding:5px;
border-radius: 5px;
border:none;
}
.button:hover{
cursor: pointer;
}
.content-wrap{
margin:60px;
padding:10px;
}
.ft{
color:white;
}
.h-img{
width:60%;
height: auto;
max-width:300px;
max-height:400px;
box-sizing: border-box;
position: absolute;
bottom:0;
right:0;
margin-right:100px;
}
@media screen and (max-width: 768px){
.hcontainer{
background: linear-gradient(to bottom, blue, violet);
width: 100%;
display:center;
margin:auto;
padding:10px;
box-sizing: border-box;
text-align:center;
flex-direction: column;
position: relative;
}
.hcontanier-content{
flex:1;
width:100%;
margin:0;
}
}
