嗨, 我是wordpress的新手, 我想了解更多信息, 我的老板要求我对网站进行一些修改。他想保留我修改过的满足他要求的27个主题。现在我遇到了一些问题：从931到767的宽度, 导航看起来很混乱。我有一堆css添加了一些尝试修复它：
/*typography changed in stylesheet: ubuntu &
raleway*/
body{
font-size:16px;
}
@media only screen and (max-width: 790px) {
body{
font-size:14px;
}
#masthead .navigation-top .wrap{
z-index:1;
position: absolute;
width: 100%;
}
.site-content-contain{
margin-top:1.25em;
}
}.custom-logo-link, .custom-logo-link img{
max-height: 8em;
margin-bottom:1em ;
max-width: 100%;
height: 8em;
width: auto;
}
.site-title{
text-transform: none;
font-weight:800;
font-family:ubuntu;
font-size:1.875em;
}#masthead{
height:40vh;
position: relative;
box-sizing: border-box;
/*border: 5px solid red;
*/
display:flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
#custom-header{
position: relative;
height: 100%;
width: 100%;
box-sizing: border-box;
/*border: 5px solid green;
*/
display:flex;
text-align: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
#custom-header .custom-header-media {
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
/*border: 5px solid blue;
*/
display:flex;
justify-content: center;
text-align: center;
}
#wp-custom-header {
outline: 100vh solid rgba(35, 220, 160, 0.6) !important;
outline-offset: -100vh;
overflow: hidden;
position:absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
/*border: 5px solid orange;
*/
display:flex;
justify-content: center;
text-align: center;
}
#masthead .site-branding {
display: flex;
position: relative;
box-sizing: border-box;
/*border: 5px solid black;
*/
align-items: center;
justify-content: center;
padding:unset;
/*margin-bottom:2em;
*/
width:auto;
transition:unset;
}
.site-branding .wrap {
display: flex;
position: relative;
box-sizing: border-box;
/*border: 5px solid red;
*/
align-items: center;
justify-content: center;
padding:0px;
}
.site-branding-text {
position: relative;
box-sizing: border-box;
/*border: 5px solid orange;
*/
align-items: center;
justify-content: center;
}
#custom-header #wp-custom-header img{
position:static;
}
#canvas{
position:absolute;
top:0px;
left:0px;
}
.custom-header-media::before{
background:unset;
}#content h1.entry-title{
font-size:1.875em;
text-transform: unset;
letter-spacing: unset;
}
.entry-content h1{
font-size:1.5em;
}
.panel-content .wrap{
padding-top:0.2em
}
.site-info {
display: none;
}
#main .entry-header{
margin-bottom:1em;
}
.custom-logo-link{
padding:0;
}.col-sm-4 {
margin: 0px;
padding: 0.8em;
}.card {
height: 100%;
padding: 1em;
}#myimg {
height: 10em;
max-height:10em;
width: auto;
display: flex;
position: relative;
align-items: center;
justify-content: center;
}.card-img-top {
padding: 0.2em;
width: auto !important;
position: relative;
max-height:inherit;
height:auto;
}
#mycard{
height: 50%;
}
.card-body {
height: auto;
padding: 0%;
display:flex;
flex-direction:column;
}
.card-text{
margin:0%;
}
p:empty {
display: none;
}#GRC-Card{
padding:0
}
#GRC-Card .card-body{
margin:1em;
}
#GRC-Card .card-header{
background-color:rgb(75, 166, 219);
font-weight:800;
}
/*http://ianlunn.github.io/Hover/*/
.hvr-grow-shadow {
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
box-shadow: 0 1.25em 1.25em -1em rgba(0, 0, 0, 0.7);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.navigation-top{
width:100%;
position: absolute;
bottom: 0;
z-index: 3;
}
.menu-toggle{
width:100%;
margin:0.01em;
}
.menu-toggle:focus{
outline:unset;
}
.single-post:not(.has-sidebar) #primary, .page.page-one-column:not(.twentyseventeen-front-page) #primary, .archive.page-one-column:not(.has-sidebar) #primary{
max-width:100%;
}
.site-header .navigation-top .menu-scroll-down{
display:none;
}
.page-one-column .panel-content .wrap{
max-width: 1000px;
padding-left: 3em;
padding-right: 3em;
margin-top:2.25em;
}
.page:not(.home) #content{
padding-top:2.25em;
}
#certificates tr{
border-bottom:unset;
text-align:center;
}
.site-content-contain {background-color:rgba(245, 245, 245, 0.5);
position: relative;
}
body.page.twentyseventeen-front-page .entry-title{
display:none;
}
#colophon{
font-size:1em;
line-height:1.5;
}
.site-footer .widget-area, .widget{
padding:unset;
}
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus{
background-color:#fff;
}
/*in global.js comment margin bottom of custom-header on front vs page*/
#1更改填充在媒体查询中(最小宽度：48em), 输出将在单行中。
@media screen and (min-width: 48em)
.main-navigation a {
padding: 1em 0.7em;
}
#2我在style.css第3340行中进行了更改：
@media screen and (min-width: 48em) {
to
@media screen and (min-width: 50em) {
并且不得不将其更改为50em而不是790px
@media only screen and (max-width: 790px) {
body{
font-size:14px;
}
#masthead .navigation-top .wrap{
z-index:1;
position: absolute;
width: 100%;
}
.site-content-contain{
margin-top:1.25em;
}}
【标头和导航缩放问题】我认为这不是最好/最干净的解决方案, 但它是可行的。
推荐阅读
- 标题菜单失去CSS样式
- 在WordPress插件中添加Bootstrap时遇到麻烦
- WordPress中自定义帖子类型的硬代码自定义字段
- Gutenberg自定义元数据块未将元数据保存为自定义帖子类型
- gulp 4不更新CSS和JS
- Frida 实现 Hook 功能的强大能力
- C语言进阶付费知识
- netty系列之:epoll传输协议详解
- Java Map接口详解