WordPress twenty seventeenテーマはモバイルフレンドリーではありません

Question

モバイルデバイス上でウェブサイトを表示しているときにヘッダー画像のサイズが変更されているようですので、この問題を下のCSSテーマで解決しようとしました。今問題は、ウェブサイトの幅が増加している、どのように私はこれを変更することができますか？ 私はウェブサイトを右に動かすことはできません。 これは、あなただけの水平表示からスクロールバーを防ぐために、bodyタグにoverflow-x: hidden;を追加することができ、ウェブサイトへのリンクLa Herradura

@media screen and (max-width: 480px) { 
.has-header-image.twentyseventeen-front-page .site-branding, 
.has-header-video.twentyseventeen-front-page .site-branding, 
.has-header-image.home.blog .site-branding, 
.has-header-video.home.blog .site-branding, 
.has-header-image.twentyseventeen-front-page .custom-header, 
.has-header-video.twentyseventeen-front-page .custom-header, 
.has-header-image.home.blog .custom-header, 
.has-header-video.home.blog .custom-header { height: auto; 
    left: 0; 
    max-width: 100%; 
    min-height: 0; 
    -o-object-fit: unset; 
    object-fit: unset; 
    position: relative; 
    -ms-transform: none; 
    -moz-transform: none; 
    -webkit-transform: none; 
    transform: none; 
} 

.has-header-image.twentyseventeen-front-page .site-branding, 
.has-header-video.twentyseventeen-front-page .site-branding, 
.has-header-image.home.blog .site-branding, 
.has-header-video.home.blog .site-branding, 
.custom-header-media, 
.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-video .custom-header-media iframe { 
    position: static; 
} 

.custom-header-media:before { 
    background: none; 
} 

body.has-header-image .site-description, 
body.has-header-video .site-description { 
    color: #222; 
    opacity: 1; 
} 

.site-branding .wrap { 
    padding: 0 1em; 
} 
} 

Answer 1

です。

body { 
    overflow-x: hidden; 
} 

Answer 2

私はディスプレイとして見ることができます。あなたのスタイルシートの@行1638に書かれています。これをモバイルスタイルからメディアクエリで無効にすると、水平スクロールバーを避けることができます。

@media screen and (max-width: 480px) { 
 
.has-header-image.twentyseventeen-front-page .site-branding, 
 
.has-header-video.twentyseventeen-front-page .site-branding, 
 
.has-header-image.home.blog .site-branding, 
 
.has-header-video.home.blog .site-branding, 
 
.has-header-image.twentyseventeen-front-page .custom-header, 
 
.has-header-video.twentyseventeen-front-page .custom-header, 
 
.has-header-image.home.blog .custom-header, 
 
.has-header-video.home.blog .custom-header {  
 
    display:block 
 
    height: auto; 
 
    left: 0; 
 
    max-width: 100%; 
 
    min-height: 0; 
 
    -o-object-fit: unset; 
 
    object-fit: unset; 
 
    position: relative; 
 
    -ms-transform: none; 
 
    -moz-transform: none; 
 
    -webkit-transform: none; 
 
    transform: none; 
 
} 
 

 
.has-header-image.twentyseventeen-front-page .site-branding, 
 
.has-header-video.twentyseventeen-front-page .site-branding, 
 
.has-header-image.home.blog .site-branding, 
 
.has-header-video.home.blog .site-branding, 
 
.custom-header-media, 
 
.has-header-image .custom-header-media img, 
 
.has-header-video .custom-header-media video, 
 
.has-header-video .custom-header-media iframe { 
 
    position: static; 
 
} 
 

 
.custom-header-media:before { 
 
    background: none; 
 
} 
 

 
body.has-header-image .site-description, 
 
body.has-header-video .site-description { 
 
    color: #222; 
 
    opacity: 1; 
 
} 
 

 
.site-branding .wrap { 
 
    padding: 0 1em; 
 
} 
 
}