css 반응형 - 3단가로배열 모바일에서는 세로로 진열
-
게시물 수정 , 삭제는 로그인 필요
안녕하세요.
텍스트+버튼식 3단 가로배열입니다 (반응형)
모바일버전 에서는 너무 좁게 배치되어서 글씨가 따닥따닥 붙어 보기안좋은 상황입니다
가로영역이 좁아지면 세로로 배열될 수 있도록 할 수 있을까요?
테블릿 기기까지는 pc처럼 보이게 하고싶어서 가로를 750px 정도로 가정하고
750px이하가 되면 세로로 정렬되게끔 하고싶습니다
소스에서 수정하거나, 새 구성으로 알려주실 수 있으면 참고하겠습니다
초보라서 여기저기 주워다 썼는데 불필요한 요소가 있을 수 있습니다 ㅠㅠ
---소스---
<!--size QnA-->
<section style='color: rgb(0, 0, 0); font-family: "Malgun Gothic"; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>
<div class="container " style="text-align: center; display: flex; justify-content: space-around;">
<div class="row" style="text-align: center;">
<p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목1</p>
<h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트1</h3>
<a href="버튼링크1"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;"><img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>
</div>
</div>
<div class="row" style="text-align: center;">
<p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목2</p>
<h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트2</h3>
<a href="버튼링크2"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;"><img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>
</div>
</div>
<div class="row" style="text-align: center;">
<p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목3</p>
<h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트3</h3>
<a href="버튼링크3"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;"><img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>
</div>
</div>
</div>
</section>
<div id="wrapper" style="text-align: center;">
<main id="content">
<div class="section-heading">
<br>
</div>
<style>
.grid-image {
display: flex; flex-wrap: wrap; align-items: flex-start; margin: 30px 0;
}
.grid-image img {
width: calc(33.333% - 10px); margin: 0 15px 15px 0;
}
.grid-image img:nth-of-type(3n),
.grid-image img:last-child {
margin-right: 0;
}
@media screen and (max-width:640px) {
.grid-image img {
width: calc(100% - 15px);
}
}
@media screen and (max-width:480px) {
.grid-image img: nth-of-type(2n) {
margin-right: 0;
}
.grid-image img:nth-of-type(3n) {
margin-right: 15px;
}
}
</style>
</main>
</div>
#css 반응형 #css 반응형 사이즈 #css 반응형 레이아웃 #css 반응형 위치 고정 #css 반응형 비율 유지 #css 반응형 width #css 반응형 이미지 #css 반응형 웹 #css 반응형 폰트 사이즈 #css 반응형 박스