반응형 웹 최신게시글 크기 자동으로 변경하려면 어떻게해야하나요?

반응형 웹 최신게시글 크기 자동으로 변경하려면 어떻게해야하나요?

QA

반응형 웹 최신게시글 크기 자동으로 변경하려면 어떻게해야하나요?

본문

안녕하세요. 제목 그대로 반응형 웹을 만들고있는중인데요.

최신게시글을 PC로 봤을땐 정해진 길이로, 모바일로 봤을때 가로 꽉 차는 길이로 보이게끔 하고싶은데 적용이 안되네요 ㅠ 뭐가 문제인지 봐주실수있을까요..?

 

css 부분은 이렇게 되어있구요..

 

#main0 {display:block; width:100%;}
#main01 {display:inline-block; width:300px; max-width:100%;}
#main02 {display:inline-block; width:500px; max-width:100%;} 

 

PC로 봤을때는

1030305798_1532929277.4533.png

이렇게,

 

모바일로 봤을때는

1030305798_1532929419.5111.png

 

이렇게 보이게 하고싶습니다. 지금은 PC는 똑같이 나오는데 모바일에서

1030305798_1532929286.5119.png

이런식으로 보입니다.. css에 어느부분을 더 추가해야 2번째 그림처럼 될까요?

max-width:100%; 로는 적용이 안되는건가요?ㅠ

 

+) #main0은 01과 02에 각각 따로주었습니다 필요한 부분만 가져오려다보니 헷갈려서 하나로 묶어 그려버렸었네요..

이 질문에 댓글 쓰기 :

답변 1

display: block

으로 주시면 어떨까요?

width:100%; 으로 하셔야 적용이 될 것 같아요~

inline-block을 block로 바꾸면 이미지 옆에 뜨지않고 이미지 아래쪽으로 나열되더라구요 width:100%로 바꾸면 크기 자동화 문제는 해결되는데 마찬가지로 아래쪽으로 나열돼버리네요 ㅠ


#main01 {
	padding: 2px;
	display: inline-block;
}
/*PC용*/
@media only screen and (min-width: 769px /*브레이크포인트수치*/) {
	#main01 {
		width: 305px;
	}
}

/*스맛폰용*/
@media only screen and (max-width: 768px /*브레이크포인트수치*/) {
	#main01 {
		width: 100%;
	}
}


이런식으로 스마트폰일때는 width를 100% 주시면 됩니다.
다른 부분도 위와 같이 하시면 되겠네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,117 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT