미디어쿼리 질문 ,,
본문
안녕하세요 초보 퍼블리셔입니다!
저번에 같은질문 드렸었는데 잘 해결이 되지않아서 다시 여쭙니다 ,,
https://www.connectvalue.net/contents/custom/lecture/lectureList.asp?page_str_menu=19
이 페이지에서 분야별강의 옵션 선택 결과값의 카드형태가
크롬에서는 잘 나오는데 익스에서는 반응형을 먹어버린 형태로 나옵니다
그런데 창을 줄였을때는 또 잘 되더군요 ,,첫화면만 max-width:480px이 먹힌채로 나옵니다
저번에 반응형 우선순위 확인하라고 하셔서 제 나름 대로 했는데 어딜 수정해야 크롬과 같은 화면이 나올까요 ?? 고수님들 도움 부탁드립니다! ㅠㅠ
답변 3
이 부분은 css 우선순위가 문제가 맞고요.
css 파일과 아닌곳에서 style 로 정의된 경우로 나오네요.
이럴경우는 정도를 따라가면서 그냥 단순 무식한게 최곱니다.
다양하게 쓸줄 아는것도 고수의 지름길(?) 일 수 있어요 ㅎㅎ
connectvalue.css 파일에,
.recommedLecture .lectureList .lecli {width:18% !important;}
@media (max-width:480px) {
.recommedLecture .lectureList .lecli {width:46% !important;}
}
이런식으로 css 파일에 정의 한번 더 해주고 우선순위 + 에 !important 까지 강제로
먹여서 해결을 보세요~~
그리고 lecli 가 width:18% 일때랑 width:19% 일때가 존재하네요.
5개 배열인데, 마진값을 주려고 하셔서 일정하게 배분을 못하신것으로 판단되네요.
이럴경우는 부모의 요소를 하나 더 만들어서 부모에 width:20%로 만들어주고,
그 밑 자식에게 padding:10px 후 다시 원래의 컨텐츠에 맞게 작업하시면 됩니다.
따흑 감사합니다 ,, 총체적난국인 누더기 css를 유지보수하는게 쉽지않네요ㅠㅠ
노가다이긴 한데 ie용 핵 css도 있습니다.
_:-ms-input-placeholder, :root .class or #id 로 지정해서 ie에서만 위치조절이 가능하도록 할수 있어요
현재 ie11 에서는 잘 나옵니다.
리스트 개체는 문제가 없는데
상단 메뉴부분이 총 너비를 벗어나는것 같습니다.
위 메뉴를 hidden 처리하고 한번 테스트 해보세요.
