Question

我正在使用博客并且有一个自定义模板我添加了一个标题它工作正常但标题没有在移动模板上调整大小我的网站是https://untoldstoriesofpakistan.blogspot.com

我认为这是我的标头css

标题

div#navigation-wrapper {
width: 56%;
float: right;
}
#header {
width: 30%;
background-size: contain;
}
#logo {
text-align:center;
padding:0px 0;
height: 10px;
 background-size: contain;
}

这是我的媒体广告

@media only screen and (max-width: 767px) {

    .container {
        width:300px;
    }

    #navigation-wrapper {
        display:none;
    }

    .slicknav_menu {
        display:block;
    }

    #logo img {
        max-width:300px;
        height:auto;
    }

    .post-header h1 a, .post-header h2 a, .post-header h1 {
        font-size:22px;
        letter-spacing:2px;
    }

    .post-image img {
        width:300px;
        height:auto;
    }

    .post-image.audio iframe {
        width:300px;
        height:auto;
    }

    .item-related {
        width:320px;
        margin-bottom:30px;
    }

    .share-box {
        width:46px; 
        height:36px; 
        line-height:36px;
        margin:0 4px;
    }

    .post-pagination .prev-post {
        width:300px;
    }
    .post-pagination .next-post {
        width:300px;
    }

    #respond textarea {
        width:90%;
    }

    .thecomment .author-img {
        display:none;
    }

    #widget-area .widget, #sidebar .widget {
        width:300px;
        margin-right:32px;
        float:left;
        margin-bottom:35px;
    }

    #footer-logo img {
        max-width:300px;
        height:auto;
    }

    #footer-social a i {
        height:28px;
        width:28px;
        line-height:28px;
        margin-right:0;
        font-size:12px;
    }
    #footer-social a {
        margin:0 5px;
    }
    #footer-social a span{
        display:none;
    }

    .wpcf7 textarea {
        width:94%;
    }

    .sp-grid li {
        width:320px;
    }
    .sp-grid li:nth-child(3n+3) {
        margin-right:0;
    }
    .sp-grid li:nth-child(2n+2) {
        margin-right:0;
    }

    .container.sp_sidebar #main {
        width:300px;
        margin-right:0;
    }
    .container.sp_sidebar #sidebar {
        width:300px;
    }

        .container.sp_sidebar #sidebar .widget {
            width:300px;
        }

    .container.sp_sidebar .item-related {
        width:300px;
        margin-bottom:30px;
    }


    .col-md-6.site-top-menu-right.text-right {
    display: none;
    }





    div#sidebar-narrow {
    display: none;
    }

    div#main-part {
    float: left;
    width: 310px;
    }

    }

Answer 1

您需要更改标题图片大小。搜索您的代码

@media only screen and (max-width: 767px) and (min-width: 480px){
  #logo img {
     max-width: 480px;
        height: auto;
     }
  }

@media only screen and (max-width: 767px) {
    #logo img {
        max-width: 300px;
        height: auto;
     }
  }

img#Header1_headerimg {
      width: 180px;
      height: 55px;
      float: left;
 }

并将其替换为

img#Header1_headerimg {
    width: auto;
    height: 50px;
    float: left;
}

Answer 2

使用以下内容更改css中的代码：

#logo img { 
    max-width: 10em;
    height: auto;
}

我的网站标题图像未在移动设备上调整大小

2 个答案: