フォーラムへの返信
-
投稿者投稿
-
度々申し訳ございません。先日は無事表示されていたのですが、本日見てみると、
ヘッダーの余白が出来てしまうのと、タブレット、スマホ時にボタンが見えなくなってしまいました。
相談時よりヘッダーコンテンツが増えるなどの変更はありましたが、相談時の状態(カスタマイザーで余計な追加CSSを消して、ヘッダーコンテンツも相談時のものに戻してみました。)にしても、うまく変わりませんでした。
何か良い方法はありますでしょうか。
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ませんお忙しいところありがとうございます。とても良い感じです。
すみません。スマホ表示した際、ロゴをもう少し大きくすることは可能でしょうか。
ボタンを小さくしたのですが、ロゴのサイズが変わらないようです。
現状の追加CSSです。
/* PC 以外でも TEL ボタンを表示 */ .l-header--2row .l-2row-header__row:first-child .u-invisible-md-down { display: block !important; } /* ヘッダーの1行目と2行目の間の余白を消す */ [data-has-global-nav=true] .l-2row-header__row:last-child, [data-has-global-nav=true] .l-center-header__row:last-child { margin-top: 0; } @media (max-width: 63.9375em) { /* タブレット表示でのボタンサイズ調整 */ a[href="tel:+0476931538"] { padding: 10px 20px!important; /* パディングを少し小さくする */ font-size: 0.8rem; /* フォントサイズを小さくする */ } } /* スマートフォン表示でのボタンサイズ調整 */ @media (max-width: 600px) { a[href="tel:+0476931538"] { padding: 4px 10px!important; /* より小さなパディングにする */ font-size: 0.5rem!important; /* より小さなフォントサイズにする */ } }
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ませんとんでもありません!2行にしました!
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ませんありがとうございます。
下記サイトに同じものを構築し、ヘッダーレイアウトを1行にして追加CSSを消しました。
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ません可能です。
全体的にバランスが整えられれば特に問題ありません。
ヘッダーを2行にした場合、「電話ボタンが右に寄ってしまっていた+上下の余白が整っていなかった」
ので現在中央ロゴにしている状況でした。(この場合はもう少しボタンを左に寄せるorボタンを大きくする方が良いと思っています{TEL→電話をかける などして})
ヘッダーレイアウト2行の場合の画像を2枚添付します。
それと追加で大変申し訳ありませんが、現状PCの上下の余白も、均等にしたいです。
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ませんすみません!こちらイメージとなります。
お忙しいところすみませんが、ご確認お願いいたします。
♥ 0いいねをした人: 居ません追記
ヘッダーコンテンツがそのままボタンになってしまっていてすみません。
aタグの<>を外しました。
a href=”tel:+0476931538″ style=”background-color: #69592C; color: white; padding: 14px 25px;margin-top:20px; text-align: center; text-decoration: none; display: inline-block;”>TEL/a
♥ 0いいねをした人: 居ません -
投稿者投稿