699px 미만 사이즈만 되면 가로 스크롤바가 사라지고
699px 사이즈가 유지되면서 화면 가로 사이즈가 줄어들어도
해당 prism 때문에 문서 내용이 모두 699px 사이즈로 되어 버리네요...
사이트 미디어쿼리 내용
Copy
@media (max-width:1199px) {
.L-sidebar {
display: none
}
#wrapper {
grid-template-columns: 700px 245px;
width: calc(700px + 245px + 20px);
margin: 0 auto
}
}
@media (max-width:959px) {
.R-sidebar {
display: none
}
#wrapper {
grid-template-columns: 700px;
width: 700px;
margin: 0 auto
}
}
@media (max-width:699px) {
#wrapper {
grid-template-columns: 1fr;
width: 95%;
margin: 0 auto;
}
}prism.css 코드
Copy
pre[class*=language-]{padding:.4em .8em;margin:.5em 0;overflow:auto;background-size:1em 1em}
수정 시도한 코드들
Copy
@media (max-width: 699px) {
pre[class*=language-] {
overflow-x: 100%;
}
}
또는
@media (max-width: 699px) {
pre[class*=language-] {
overflow-x: auto;
}
}
또는
@media (max-width: 699px) {
pre[class*=language-] {
overflow-x: hidden;
}
}
|
답변 1개 / 댓글 1개
채택된 답변
+20 포인트
2년 전
현재 코드에서는 .L-sidebar와 .R-sidebar를 숨기는 것이 아니라 #wrapper의 grid-template-columns 값을 조정하고 있습니다. 그러나 Prism 코드에 의해 pre 요소는 고정된 너비를 가지고 있기 때문에, .L-sidebar와 .R-sidebar을 숨기더라도 pre 요소의 크기는 변하지 않는 것 같습니다.
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.
Copy
/* 기본 스타일 */
pre[class*=language-] {
padding: .4em .8em;
margin: .5em 0;
overflow: auto;
background-size: 1em 1em;
/* 원하는 너비로 설정 */
max-width: 100%;
}
/* 미디어 쿼리에 따른 스타일 변경 */
@media (max-width: 699px) {
pre[class*=language-] {
/* 원하는 너비로 설정 */
max-width: 100%;
}
}
이렇게 수정하면 .L-sidebar와 .R-sidebar을 숨기는 미디어 쿼리와 함께 사용할 때, Prism 요소도 레이아웃에 따라 적절하게 반응할 것으로 생각합니다.
답변에 대한 댓글 1개
crow9p
2년 전
답변을 작성하려면 로그인이 필요합니다.
다른 곳에서 더 충돌 되는 건지 적용은 되지 않네요 충돌 되는 곳을 찾아봐야 겠네요