TwentyFourteen宽度修改对应

1.右侧空白

首先要解决的问题就是整个网站右侧的空白,在网上看到有人说这是因为 Twenty Fourteen  的 CSS 中设置了 .site 与 .site-header 属性

max-width: 1260px;

这即意味着网页最大只能显示1260px的宽度,这显然低于一些高分辨率屏幕的尺寸,修改的办法就是在 style.css 末尾添加下面的代码,覆盖掉原来的样式:

.site,
.site-header {
max-width: 100%;
}

 2.内容宽度

Twenty Fourteen  中留给中间正文内容的宽度比较窄,主要原因是还要为右侧边栏留出空间

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.site-content .navigation,
.comments-area,
.page-header,
.page-content {
max-width: 70%; // put the width you like here
}

.site-content header .entry-meta {
max-width: 100%;
}

 

《TwentyFourteen宽度修改对应》有3个想法

  1. .site-content .entry-content,宽度修改为75%或者更高时,IPAD浏览时首页会出现右侧空白的情况;修改为70%及以下就没有问题。博主能帮忙查看下原因吗?

  2. 能不能共享一下style.css这个文件,谢谢~
    按照你的思路做了,还是同未修改一样。
    能邮件给我一下吗?感谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注