WordPress 二十七主题不适合移动设备答案

【问题标题】：WordPress twenty seventeen theme not mobile friendlyWordPress 二十七主题不适合移动设备
【发布时间】：2017-06-20 07:45:43
【问题描述】：

在移动设备上查看网站时，标题图像似乎会自行调整大小，因此我尝试使用下面的 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;
}  
}

【问题讨论】：

标签： html css wordpress

【解决方案1】：

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

body {
    overflow-x: hidden;
}

【讨论】：

您确定将代码放在正确的位置并清除缓存吗？

【解决方案2】：

我可以看到 display:table;在您的样式表@ line 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;
}  
}

【讨论】：