반응형 웹 최신게시글 크기 자동으로 변경하려면 어떻게해야하나요?
본문
안녕하세요. 제목 그대로 반응형 웹을 만들고있는중인데요.
최신게시글을 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로 봤을때는
이렇게,
모바일로 봤을때는
이렇게 보이게 하고싶습니다. 지금은 PC는 똑같이 나오는데 모바일에서
이런식으로 보입니다.. css에 어느부분을 더 추가해야 2번째 그림처럼 될까요?
max-width:100%; 로는 적용이 안되는건가요?ㅠ
+) #main0은 01과 02에 각각 따로주었습니다 필요한 부분만 가져오려다보니 헷갈려서 하나로 묶어 그려버렸었네요..
답변 1
display: block
으로 주시면 어떨까요?
width:100%; 으로 하셔야 적용이 될 것 같아요~
inline-block을 block로 바꾸면 이미지 옆에 뜨지않고 이미지 아래쪽으로 나열되더라구요 width:100%로 바꾸면 크기 자동화 문제는 해결되는데 마찬가지로 아래쪽으로 나열돼버리네요 ㅠ
@00832 링크를 주시면 봐 드릴 수 있을 것 같은데...
혹시 미디어쿼리를 안쓰고 css를 쓰신건가요??
앗 네 시도는 해봤었는데 제가 잘못짰는지 반응이 없어서 도로 지웠습니다..ㅠ
링크라 하면 어느 링크를 말씀하시는걸까요? 홈페이지 링크를 드리면 될까요..?
네 지금 실행이 잘 안되는 페이지 주소를 알려주시면 봐드릴게요~
#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% 주시면 됩니다.
다른 부분도 위와 같이 하시면 되겠네요.
아! 적용해보니 잘 되네요 미디어쿼리를 써야하는거였군요 ㅠㅠ 감사합니다 적용해서 다른부분도 해보겠습니다 정말 감사합니다..!!
