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;
}

Answer 2

我可以在您的stylesheet @ line 1638中看到display:table；。通过媒体查询对移动样式禁用此功能，可以避免出现水平滚动条。请尝试

​

@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;
}  
}

​