html - WordPress 二十十七主题不适合移动设备

Question

在移动设备上查看网站时，标题图片似乎会自行调整大小，因此我尝试使用下面的 css 代码(在子主题中)解决此问题。现在的问题是网站的宽度增加了，我该如何改变呢？ 我不希望网站能够向右移动。 这是网站的链接 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

您可以将 overflow-x: hidden; 添加到 body 标签以防止滚动条水平显示。

body {
    overflow-x: hidden;
}