prism.js 가로 스크롤바가 특정 사이즈에서 사라지는 현상에대해서 질문드립니다.
본문
699px 미만 사이즈만 되면 가로 스크롤바가 사라지고
699px 사이즈가 유지되면서 화면 가로 사이즈가 줄어들어도
해당 prism 때문에 문서 내용이 모두 699px 사이즈로 되어 버리네요...
사이트 미디어쿼리 내용
@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 코드
pre[class*=language-]{padding:.4em .8em;margin:.5em 0;overflow:auto;background-size:1em 1em}
수정 시도한 코드들
@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
현재 코드에서는 .L-sidebar와 .R-sidebar를 숨기는 것이 아니라 #wrapper의 grid-template-columns 값을 조정하고 있습니다. 그러나 Prism 코드에 의해 pre 요소는 고정된 너비를 가지고 있기 때문에, .L-sidebar와 .R-sidebar을 숨기더라도 pre 요소의 크기는 변하지 않는 것 같습니다.
다음과 같은 방법으로 시도해 볼 수 있을 것 같습니다.
/* 기본 스타일 */
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 요소도 레이아웃에 따라 적절하게 반응할 것으로 생각합니다.
답변 감사합니다.
다른 곳에서 더 충돌 되는 건지 적용은 되지 않네요 충돌 되는 곳을 찾아봐야 겠네요
답변을 작성하시기 전에 로그인 해주세요.