如何让这个标题在移动设备上看起来更好?

时间:2018-03-27 16:53:04

标签: css wordpress responsive-design

https://blendbee.com

这是一个WordPress网站。标题的顶部需要针对较小的屏幕尺寸进行一些样式改进:

  1. 将徽标置于中心
  2. 徽标上方有一些填充物或边缘(因此它不会碰到顶部栏)
  3. 菜单图标上方和下方的空格较少
  4. enter image description here

    这是当前的HTML代码:

    <div class="header-wrap">
    <header id="header" class="site-header " role="banner">
    <div class="row">
    <div class="large-12 small-12 columns">
    <div class="logo">
    <a href="https://blendbee.com/" title="BlendBee – Your Tea. Your Way." rel="home">
    <img data-interchange="[https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (default)], [https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png, (retina)]" alt="" class="hideie" data-uuid="60a3bc00-c94c-c4ba-258c-a9faa107e418" src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png">
    <img src="https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png" alt="" class="ie">
    <noscript>&lt;img src='https://blendbee.com/wp-content/uploads/2014/06/BlendBee-Logo-and-Tagline-2.png' alt='BlendBee &amp;#8211; Your Tea. Your Way.'&gt;</noscript>
    </a>
    </div>
    <div id="mobile-menu-button" class="show-for-small">
    <a class="secondary button" id="mobileMenuButton" href="#mobile-menu">
    <span class="mobile-menu-icon"></span>
    <span class="mobile-menu-icon"></span>
    <span class="mobile-menu-icon"></span>
    </a>
    </div>
    </div>
    </div>
    </header>
    </div>
    

    相关的CSS:

    @media screen and (max-width: 767px) {   
            .mix.half.mix_all {
                width: 50%;
                float: left;
            }
    
            .mix.mix_all {
                width: 100%;
            }
    
            .sidebar.large-3.small-12.columns {
                width: 100%;
                float: none;
            }
    
            #soc-icons-wrap.closed {
                margin-bottom: 20px;
                height: 50px;
    
            }
    
            .large-6.small-12.columns p{
                width: 100% !important;
            }
    
            #header.scroll-to-fixed {
                position: static;
            }  
    
        }   
    
        #mobile-menu-button .button {
            margin-bottom: 0;
            padding: 0.75em 0.5em;
            width: auto
        }
    
        .mobile-menu-icon {
            background: #fff;
            height: 0.25em;
            width: 2.5em;
            display: block;
        }
    
        .mobile-menu-icon + .mobile-menu-icon {
            margin: 0.25em 0 0
        }
    
        @media only screen and (min-width: 767px) {
            body.admin-bar #header.scroll-to-fixed {
                top: 32px;
            }
    
        }
    
        @media only screen and (max-width: 767px) {
            .logo {
                float: none;
                text-align: center;
            }
    
    
            #header.scroll-to-fixed {
                position: static !important;
                height: auto;
                width: auto;
                border-bottom: none;
                }
    
            #header.scroll-to-fixed .logo {
                width: 300px;
                padding-top: 20px;
                position: static;
                top: 0;
                margin: 0 auto;
                 }
    
    
            #header.scroll-to-fixed .logo img {
                max-height: 140px;
                width: 100%;
                -webkit-transition: none;
                -moz-transition: none;
                transition: none;
                }
    
            #mobile-menu .tiled-menu {
                float: none;
                margin: 0;
                padding: 0;
            }
    
            #mobile-menu .main-menu-item {
                float: none;
                width: 100% !important;
            }
    
            #mobile-menu .menu-tile {
                height: 60px !important;
                background-image: none !important;
            }
    
            #mobile-menu .item-title,
            #mobile-menu .tiled-menu > .menu-item-language > a {
                top: 5px;
                font-size: 20px;
                left: 25px;
            }
    
            #mobile-menu .tile-icon,
            #mobile-menu .tiled-menu > .menu-item-language:before {
                right: 10%;
                width: auto;
            }
    
            #mobile-menu .tiled-menu > .menu-item-language {
                height: 60px !important;
            }
    
            #mobile-menu .style-metro .sub-menu {
                padding-top: 3px;
            }
        }    
    
        @media only screen and (min-width: 640px) and (max-width: 1024px) {
            .tiled-menu .sub-menu {
                position: absolute;
            }
    
            .tiled-menu {
                text-align: center;
            }
    
            .main-menu-item {
                text-align: left;
            }
    
    
            .tiled-menu .metro-menu-item .sub-menu {
                position: absolute;
            }
    
        }
    
        wrapper i {
            margin: 84px 0 0 110px;
    
        }
    
        .entry-header .entry-meta .entry-tags {
            margin-left: 0;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns {
            position: relative;
            top: 12px;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer {
            width: 33%;
            margin-top: 20px;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns .answer input {
            padding: 18px 5px;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
            width: 13%;
            margin-top: 20px;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
            width: 33%;
            margin-top: 20px;
        }
    
        .site-header {
            border-bottom: none;
        }
    
        ol ul, ul ol, ul ul, ol ol {
            -webkit-margin-before: 0px;
            -webkit-margin-after: 10px;
        }
    
        .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p {
            float: left;
            width: 70%;
            text-align: left;
            margin-top: 0;
        }
    
    
        @media only screen and (min-width: 320px) and (max-width: 767px) {
            .tiled-menu {
                left: -3px !important;
            }
    
            .tiled-menu>li>ul {
                padding-top: 0;
            }
    
        }
    
    
        @media screen and (max-width: 320px) {    
            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
                text-align: center;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
                margin-left: 28%;
                margin-top: 0;
                width: 52%;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                margin-top:0 ;
            }
    
            .large-3.small-12.columns input{
                width: 145px;
            } 
    
        }
    
        @media screen and (min-width: 321px) and (max-width: 480px) {       
            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
                text-align: center;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
                text-align: center;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
                margin-left: 36%;
                margin-top: 0;
                width: 35%;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                margin-top:0 ;
            }
    
            .large-3.small-12.columns input{
                width: 148px;
            }
        }
    
           @media screen and (min-width: 480px) and (max-width: 800px) {
    
            .site-header .logo {
                margin: 0 auto 20px;
            }
    
            .site-header.scroll-to-fixed .logo  {
                margin: 0;
            }
    
        }
    
        @media screen and (min-width: 481px) and (max-width: 568px) {
            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
                text-align: center;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
                margin-left: 38%;
                margin-top: 0;
                width: 30%;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                margin-top:0 ;
            }
    
            .large-3.small-12.columns input{
                width: 149px;
            }
    
        }
    
        @media screen and (min-width: 569px) and (max-width: 600px) {
    
            .category-submenu .sub-nav .sub-nav dd {
                margin-left: 0.8rem !important;
                margin-bottom: 0;
            }
    
            .mix .entry-thumbnail img {
                width: 100% !important;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns{
                text-align: center;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns{
                margin-left: 38%;
                margin-top: 0;
                width: 28%;
            }
    
            .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                margin-top:0 ;
            }
    
            .large-3.small-12.columns input{
                width: 148px;
            }
    
            .pricetable-column {width: 50% !important;}
        }
    
    
            @media screen and (min-width: 768px) and (max-width: 800px) {
    
    
                .large-12.small-12.columns .large-8.small-12.columns .large-6.small-12.columns p{
                    float: left;
                    width: 56%;
                    text-align: left;
                    margin-top: 0;
    
                }
    
    
                .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns {
                    width: 13%;
                    margin-top: 20px;
                }
    
                .large-12.small-12.columns .large-8.small-12.columns .large-3.small-12.columns.answer{
                    width: 26%;
                    margin-top: 20px;
                }
    
            }
    
    
            @media screen and (min-width: 768px) and (max-width: 1000px) {
                .logo {
                    float: none;
                    margin: 0 auto;
                }
    
                #header.scroll-to-fixed .logo {
                    display: none;
                }
    
                .main-menu-item {
                    display: inline-block;
                    margin-left: 0;
                    float: none;
                    text-align: left;}
    
                .tiled-menu {
                    float: none;
                    text-align: center;
                }
    
                    }
    
        @media screen and (min-width: 640px) and (max-width: 767px) {
            .tiled-menu>li>ul {
                padding-top: 25px;
            }
        }  
    

    如果有人可以提供帮助,我会非常感激 - 谢谢:)

1 个答案:

答案 0 :(得分:1)

首先 - 尝试使用此代码将徽标居中并在顶部添加一些填充:

.logo {
    padding-top: 50px;
    width: 280px;
    margin: auto;
}

enter image description here

在&#34;自定义CSS&#34;中输入此代码打开customizer时的部分内容。

第二 - 此代码用于删除菜单图标

下面的 部分空白区域

#mobile-menu-button {float: none;text-align: center;}

enter image description here

在responsive.min.css文件中替换此部分。

第三 - 此代码用于删除菜单图标上方的 部分空格:

#mobile-menu-button {
    margin: 1rem 0 0;
}

enter image description here

在foundation.css文件中替换此部分。

正如您将看到的,它有效:

enter image description here