반응형 대응시 오른쪽에 생긴 여백을 지우고 싶습니다.

목적

포트폴리오용 사이트를 반응형 대응했지만, 스마트폰에서 보면 오른쪽에 수수께끼의 여백이 생겨 버린다
그것을 어떻게 하고 싶어

조금보기가 어렵지만 오른쪽에 여백이 있습니다.

해결책

래퍼로 전체 body를 감싸

test.html

<body>
  <div id="wrapper"> <!-- ←これを追加する -->
    <div>
     ....
    </div>
  </div>
</body>

왜 wrapper인가?

원래 기능을 감싸고 그 녀석 대신 화살에 서는 녀석

※참고
래퍼 (wrapper)

java의 래퍼 클래스 등과 같이 원래 클래스를 감싸는 이미지입니까?
이번에는 아래 div 요소 전체를 감싸고있는 느낌입니까?

css에서 다음을 추가합니다.

test.css

#wrapper {
  overflow: hidden;
}

overflow …… 튀어나온 요소의 표시 방법을 지정한다
hidden
내용이 박스에 맞지 않으면, 맞지 않는 부분은 숨겨집니다. 내용이 맞지 않는 경우에도 스크롤 바 등은 표시되지 않는다

래퍼로 감싼 아래의 div 요소의 여백을 숨기는다는 느낌이군요

※참고
★CSS 레퍼런스

스마트폰으로 보기 확인

오른쪽 여백이 사라졌는지 확인

참고로 한 사이트

오른쪽에 수수께끼의 여백이 표시되었지만 CSS 만지면 1 분만에 치유 된 이야기

Reference

이 문제에 관하여(반응형 대응시 오른쪽에 생긴 여백을 지우고 싶습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/h4n24w4/items/3aee2406a57f7067eca9

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다