테스트 사이트 - 개발 중인 베타 버전입니다

게시판 모바일 질문 채택완료

임현호 8년 전 조회 3,793

http://amina.co.kr/bbs/view_image.php?fn=%2Fdata%2Feditor%2F1711%2F2e90232ed1146f8cf39136ca7635d133_1509539458_7178.png" target="_blank">2e90232ed1146f8cf39136ca7635d133_1509539458_7178.pnghttp://amina.co.kr/data/editor/1711/2e90232ed1146f8cf39136ca7635d133_1509539458_7178.png" itemprop="image" src="http://amina.co.kr/data/editor/1711/2e90232ed1146f8cf39136ca7635d133_1509539458_7178.png" title="2e90232ed1146f8cf39136ca7635d133_1509539458_7178.png" />

 

현재 제 사이트의 경매장 게시판 모바일 세로 모드 화면입니다.

 

지인 분께서 조언해주시기를, 좌우를 늘려서 이쁘게 맞춰주는것인데

 

device-width를 이용해서 반응형으로 하는것이 좋을것같다고 하셨습니다.

 

그런데 제가 초보라서 방법을 잘 몰라서요 ㅎㅎ 좌우를 늘리려면(?) 어떻게 해야 하나요???

 

경매장 게시판 링크 남깁니다~

 

2e90232ed1146f8cf39136ca7635d133_1509539881_1881.pnghttp://amina.co.kr/data/editor/1711/2e90232ed1146f8cf39136ca7635d133_1509539881_1881.png" />

pc 에서 나오는 화면처럼 모바일 세로모드에서도 이런식으로 나오게 하고싶은데 ㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
8년 전

사이트를 반응형으로 만드셨네요.

 

/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 미디어쿼리 검색해보시면 정보 많이 나오구요.

스타일 부분 조금씩 수정해보시면 됩니다.

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

C
8년 전

device-width 도 필요 없고 그냥 퍼블리싱 시 가로, 세로길이 등에 % 로 설정하면 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

임현호
8년 전
제가 초보라서 그런데 어떤 파일에서 어디를 수정해야 되는지 자세하게 알려 주실 수 있으신가요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인