質問: ### PC・スマホ両デバイスにおけるブログカードのレイアウト調整 CSS初心者のなおころと申します。 運営しているブログの ブログカードに表示される 「あわせて読みたい」周りのレイアウトを修正したいです。 ●現在の状態 スマホ版:適切に表示されている ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1b4a9e7b83b79b44b598681e41af1736.jpeg) PC版:文字列の後半部分「たい」がボックスからはみ出している ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/35207da7985f94f6a0457fd08162d7c8.png) ●試したこと: .blog-card-hl-box内の調整 PC版の文字列がすべてボックス内に収まるように ボックスの横幅を大きくすると スマホ版では必要以上にボックスの横幅が広くなってしまいます。 PCで見てもスマホで見ても ボックスの幅が文字幅を少し超える程度に 調整するにはCSSにどのような変更を加えればよろしいでしょうか? ご回答いだけますと幸いです。 .blog-card-hl-box { font-size: 12px; font-weight: 500; padding: 7px 10px; top: -15px; left: 20px; width: 132px; } 運営ブログ:https://availability89.com/kochi-living/recommendation-spot/ 使用テーマ:JIN
回答: .blog-card-hl-boxのwidthの指定を削除 .blog-card .blog-card-hl::afterのposition:absolute;指定を削除