현재 제 사이트의 경매장 게시판 모바일 세로 모드 화면입니다.
지인 분께서 조언해주시기를, 좌우를 늘려서 이쁘게 맞춰주는것인데
device-width를 이용해서 반응형으로 하는것이 좋을것같다고 하셨습니다.
그런데 제가 초보라서 방법을 잘 몰라서요 ㅎㅎ 좌우를 늘리려면(?) 어떻게 해야 하나요???
경매장 게시판 링크 남깁니다~
pc 에서 나오는 화면처럼 모바일 세로모드에서도 이런식으로 나오게 하고싶은데 ㅎ
|
답변 2개 / 댓글 1개
채택된 답변
+20 포인트
2017-11-03 (금) 19:08:45
사이트를 반응형으로 만드셨네요.
/skin/board/auction/style.css 파일에서
.tender_list 검색하면 아래와 같은 스타일 나옵니다.
.tender_list {float:left; margin:0 5px 10px 5px; width:48%;}
~~ 생략 ~~
.tender_info_ul li{padding:3px 0;}
이 부분 아래쪽에 아래처럼 추가해보세요.
@media all and (min-width:320px) and (max-width:480px) {
.tender_list {float:none; margin:0 5px 10px 5px; width:99%;}
}
모바일 가로가 480px 이상이면 두줄로 나오게 됩니다.
구글에서 css 미디어쿼리 검색해보시면 정보 많이 나오구요.
스타일 부분 조금씩 수정해보시면 됩니다.
CODINGROBOT
2017-11-03 (금) 13:20:02
device-width 도 필요 없고 그냥 퍼블리싱 시 가로, 세로길이 등에 % 로 설정하면 됩니다.
답변에 대한 댓글 1개
2017-11-03 (금) 18:04:41
제가 초보라서 그런데 어떤 파일에서 어디를 수정해야 되는지 자세하게 알려 주실 수 있으신가요?
답변을 작성하려면 로그인이 필요합니다.