인프런 커뮤니티 질문&답변

작성한 질문수

애플 웹사이트 인터랙션 클론!

main.js 적용 내용

코드 적용하면서 전체적으로 문제 없는지 확인 하다 해결 안되는 부분이 있어 문의드립니다~

21.08.01 17:24 작성

257

안녕하세요~

js코드는 아니고 css 문젠가 싶기도 한데.. 나름 혼자 찾아서 해결하려 했는데 안되네요ㅜ

2가지 인데요,

첫째로 scene-2의 b번 메세지의 줄바꿈이 창 크기에 따라 유연하게 반응해야 하는데 아래 사진처럼 들쑥날쑥 합니다.

\

이런식으로 창 크기에 따라 다르고 심지어 글이 중간에 안보이기도 합니다.

둘째로 창 크기에 따라 scene-1에 해당하는 본문 내용이 scene-2로 넘쳐 흐릅니다.

문제 없이 잘 보일 때도 있지만 이 역시 창 크기가 변경되면 아래처럼 텍스트가 아래 영역으로 넘쳐 흐르고 그 정도가 창마다 다릅니다. 

답변 1

2021. 08. 21. 16:49

결론부터 말씀드리자면 css 에서

.desc-message {
  width: 50%;
  font-weight: bold;
}

를 찾아서

.sticky-elem.desc-message {
  width: 50%;
  font-weight: bold;
}

로 바꾸시면 됩니다.

.sticky-elem 이 width가 100% 설정되어있는데 이게 우선적으로 적용돼서 그렇습니다.
클래스를 더 구체화해서 우선순위를 높이면 됩니다.

작성한 질문수