前提
ネットで調べて配置をabsoluteで浮かせて配置できましたが、
レスポンシブで画面によって背景と被って文字が表示されてしまう。
実現したいこと
背景画像の上に文字を重ねて、デザインをしていますが
画面幅を変更すると、背景から文字がはみ出てしまったり、バランスが崩れてしまいます。
現在は、positionのrelative,absolutoでtopとleftでスマホ版のバランスを調整しましたが
幅を広げると、上記の現象がおきます。
何か方法があれば知りたいです。
該当のソースコード
css
/* 共通部分 ----------------------------------*/html { font-size: 100%;} body { font-family: 'Noto Sans JP', sans-serif; line-height: 24px; color: #444444;} a { text-decoration: none;} img { max-width: 100%;} /* ホーム ----------------------------------*/ .home-wrapper { background-image: url(img/fv@2x.png); background-size: cover; min-height: 100vh; height: 100%; background-repeat: no-repeat; background-position: 80% 50%; position: relative;} .home-wrapper-A,.home-wrapper-B { -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: inline-block; font-family: 'Noto Sans JP', sans-serif; font-size: 28px; font-weight: bold; line-height: 34px; background-color: #FFFFFF; letter-spacing: 0.25em; text-align: center; padding-top: 18px; padding-left: 37px; padding-right: 37px; position: absolute; top: 133px;} .home-wrapper-B { left: 430px; padding-bottom: 99px;}.home-wrapper-A { left: 248px; padding-bottom: 65px;}.home-wrapper span { color: #21A937;}/* モバイル版 ----------------------------------*/ @media (max-width: 1140px) { .home-wrapper-B { left: 310px; } .home-wrapper-A { left: 140px; }} @media (max-width: 860px) { /* ホーム */ .home-wrapper { background-position: 80% 50%; } .home-wrapper-A, .home-wrapper-B { font-size: 22px; padding-top: 10px; padding-left: 17px; padding-right: 17px; position: absolute; top: 230px; } .home-wrapper-B { left: 93px; padding-bottom: 62px; } .home-wrapper-A { left: 11px; padding-bottom: 35px; }
html
<!-- ホーム -----------------> <div id="home" class="home"> <div class="home-wrapper"> <div class="home-wrapper-A">山形の皆様の<span>かかりつけ医</span>です</div> <div class="home-wrapper-B">石井クリニックはこれからも</div> </div><!-- /.home-wrapper --> </div>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
0 コメント