Question

嗨，我是wordpress的新手，我想学习更多，我的老板要求我对the website进行一些修改。他想保留我修改过的满足他要求的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*/

Answer 1

更改填充在媒体查询中（最小宽度：48em），输出将为单个线。

 @media screen and (min-width: 48em)
    .main-navigation a {
        padding: 1em 0.7em;
    }

Answer 2

我在style.css中进行了更改第3340行：

@media screen and (min-width: 48em) {

到

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

}

我认为它不是最好/最干净的解决方案，但是它是可行的。

标头和导航缩放问题

2 个答案: