念願の横並びになりました

やはりできてみるとたいしたことないと思うのは不思議。

こんにちは！サキナオコです^ ^
きょうは晴れたり曇ったり。見事な地震雲。

いつもご覧いただき、スキ、フォロー、コメント、サポート、オススメまでも本当にほんとうにどうもありがとうございます＊^o^＊
心が折れずに今日も投稿できましたのもそんなあなたのおかげです！^o^/

で、長らくできずにいた画像とテキスト横並びの件。
できました〜ToT うれじいよぅ〜

これだけのためにどれだけ時間を費やしたか…

結局、メディアクエリ内で画像と文字にdisplay: inline-flex;を指定しました。それでもできなかったのは親要素にtext-align: center;が入っていて、メディアクエリにまで影響していてうまくいかなかったようです。

あとは、画像と文字両方いっぺんにa を指定していたのがレイアウト崩れの原因でした。面倒臭がるのはいけませんね。。それぞれに指定したら綺麗に並びました。

メディアクエリ内のgridの指定の後にこのように指定したらうまくいっています。

.navbar{
   display: block;
 }

 .navbar a {
   vertical-align: middle;
   padding-left: 1rem;
 }

 nav div{
   text-align: left;
 }

で、クロムの開発ツールにいろんなモバイルごとの表示ができる便利なものがありまして、いろいろ試していたら、Galaxy Foldという横280pxのがレイアウトが崩れるのがわかりましたので修正。

 .navbar{
   display: block;
 }

 .navbar a {
   vertical-align: middle;
   padding-left: 1rem;
 }

 nav div{
   text-align: left;
 }

 aside img {
   width: 20vw;
 }

最後のはプロフィール画像の横幅です。

うわっ！540pxのでも崩れてました。メディアクエリを修正。オッケーです。

@media screen and (max-width: 300px)
@media screen and (min-width:301px) and ( max-width:600px)
@media screen and (min-width: 1280px)

を用意しています。いいのかしら。まぁ、いいか。

そして、一段落したものの、スマホとかだと文字がやけに小さいのが気になりました。見る時大きくすればいいのかもしれないけど、小さすぎるなぁ。
と思い、指定を変えましたが、大きくなりません。また泥沼があらわれた！><

あぁ…「完璧よりもまず終わらせろ」とザッカーバーグが…

そうですね、文字は置いておいてとりあえずリンク先にとりかかろうかと思います！^o^/