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

我可以看到显示：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;
}  
}

WordPress二十七主题不移动友好

2 个答案: