미디어쿼리 질문 ,,

미디어쿼리 질문 ,,

QA

미디어쿼리 질문 ,,

본문

안녕하세요 초보 퍼블리셔입니다!

저번에 같은질문 드렸었는데 잘 해결이 되지않아서 다시 여쭙니다 ,,

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 후 다시 원래의 컨텐츠에 맞게 작업하시면 됩니다.

 

현재 ie11 에서는 잘 나옵니다.

 

3034868304_1597301634.5394.png

 

 

리스트 개체는 문제가 없는데

상단 메뉴부분이 총 너비를 벗어나는것 같습니다.

 

3034868304_1597301726.4821.png

 

위 메뉴를 hidden 처리하고 한번 테스트 해보세요.

 

 

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

회원로그인

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