VWSとは フォーラム Lightning The page-header auto generates margin top

このトピックには4件の返信が含まれ、2人の参加者がいます。1 週、 1 日前 syouei-branding さんが最後の更新を行いました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #14795

    syouei-branding
    参加者

    Hello,

    Lightning pro 0.8.0
    WP: 5.0.3

    I hide the page-header div, and responsive the siteContent div again to make it fit without the page header.

    .page-header {
        display:none;
    }
    @media (min-width: 300px) {
        .siteContent{
    	    padding-top: 49px;
        }
    }
    @media (min-width: 992px) {
        .siteContent{
    	    padding-top: 129px;
        }
    }

    But I realized that the page-header auto generates the margin-top (mobile viewport) when 49px, when 88px. Why it doesn’t create the fixed margin-top?
    How can I do in this case?

    Thanks in advance.

    • このトピックは syouei-brandingが2 週間前に変更しました。
    #14846

    kurudrive
    参加者

    Hi.

    Is this what you are trying to do?

    .page-header {
        display:none;
    }
    @media (min-width: 300px) {
        .breadSection{
    	    padding-top: 49px;
        }
    }
    @media (min-width: 992px) {
        .breadSection{
    	    padding-top: 129px;
        }
    }
    #14893

    syouei-branding
    参加者

    Hi @kurudrive,
    I hided both of the page-header and breadSection and the problem here is the padding of the siteContent caused by the margin of page-header, so I tried to fix it by this:

    @media (min-width: 300px) {
        .siteContent{
    	    padding-top: 49px;
        }
    }
    @media (min-width: 992px) {
        .siteContent{
    	    padding-top: 129px;
        }
    }

    But I realized that the page-header auto generates the margin-top (in mobile viewport) when 49px, when 88px. It’s not fixed by 49px, so

    @media (min-width: 300px) {
        .siteContent{
    	    padding-top: 49px;
        }
    }

    it’s sometimes not right.

    #14901

    kurudrive
    参加者

    OK, How about this?

    #wpadminbar {
    	position: fixed;
    }
    .breadSection,
    .page-header {
        display:none;
    }
    @media (min-width: 300px) {
        .siteContent{
    	    padding-top: 49px;
        }
    }
    @media (min-width: 992px) {
        .siteContent{
    	    padding-top: 129px;
        }
    }
    #14918

    syouei-branding
    参加者

    Oh, it works! this issue is fixed.

    Thanks for your support!

5件の投稿を表示中 - 1 - 5件目 (全5件中)

このトピックに返信するにはログインが必要です。