Vol.2 の記事で背景画像を画面サイズにfitするのを対応できたのはいいけれど
今度はその背景画像上に入れてた文字の位置がずれてしまった問題。
文字が左に来てしまっている。
・HTMLの方を見てみるとClassはcontainer
・CSSの方を見てみると単独ではなくParallax containerでスタイルが適用されているっぽい。
→他の箇所でもcontainerに入ってる要素はあったので、全部にはスタイルを適用したくない。
→Classを変える(追加)してみる。
今回ずれてしまった文字の部分のClassをcontainerから変更した。
→CSSに、変更したClass用のスタイルを追記
まず、positionをrelativeにしてみる。→なんか変。まだズレている。
そして文字が2行になってしまっている。右詰めのままになっている気もする。
右詰めのままで2行になってしまった。
もう一つ子要素の部分がtext-align: rightだったのでleftに変更。
そしてrelativeでleftからだと上下でズレてしまっていたので
positionをabsoluteに変えて、displayサイズの65%くらいに表示。
結果！
ちゃんと表示できたー！
※画面の表示サイズによって位置が変わりますが、狙ったところに書けてよかった。
さて、次はどこに取り掛かるかな。
