ロゴの位置について

  • 解決済 Chanchan.

    (@eureka20080321)


    5年前

    テーマはbeauty_plusで子テーマを作成してカスタマイズしています。

    デフォルトでロゴの位置がセンターになっているのですが、スマホ表示の時だけ左端に移動させようと１週間くらい四苦八苦しております。

    本を読んで、marginを変えてみたり、positionを変えてみたり、boxを変えてみたり、と色々やりましたが、どうにもうまくいきません。

    今後の勉強のため、ヒントだけでも教えていただけないでしょうか？
    また同じような質問かもしれませんが、よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • DRILL LANCER

    (@rickaddison7634)

    5年前

    下記コードでスマホ ( というかデバイス幅が 767px 以下 ) のときにだいたいロゴが左寄りになると思います。

    あとは、下記コードの各要素の padding を変えると良いでしょう。

    @media screen and (max-width: 767px) {
    .header .container{
        margin-left:0;
        margin-right:auto;
    }
    .logo {
        float: none;
        text-align: left;
        margin-left: 0;
        margin-right: auto;
        display: block;
    }
}
    トピック投稿者 Chanchan.

    (@eureka20080321)

    5年前

    RICKさま。

    いつも助けていただき、ありがとうございます。
    無事にできました。

    なるほど！こういった場合は、ヘッダーとコンテナも同時に設定しないとならなかったのですね。

    .logo部分ばかりを触っては、レイアウトを崩してしまい、悩んでおりました。
    いただいたコードをもう少し自分で分析して研究してみます。

    他に考えてくださった方々もありがとうございました。

    DRILL LANCER

    (@rickaddison7634)

    5年前

    .header .containerは .headerの中にある.containerという意味です。
    .headerと.containerの両方に効かせる場合は.header,.containerのようにカンマで区切ります。

    トピック投稿者 Chanchan.

    (@eureka20080321)

    5年前

    RICKさま。

    フォローアップして下さり、ありがとうございます。
    確かに本にも書いてありました。

    危うく間違えた情報が流れるところでした。
    失礼しました。
    なかなか難しいですが、面白いです！

    またよろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「ロゴの位置について」には新たに返信することはできません。