### 実現したいこと htmlとscssで添付画像のようなレイアウトを組みたいのですが、メディアクエリの最小幅375pxと最大幅である899pxとでデザインの差が出てしまうので、なるべく差がでないようにコーディングしたいです。![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/834a5a91-0cc4-46f2-a19b-a3411b3aa542.png) ### 発生している問題・分からないことデバイス幅375px～899pxで確認したとき、理想としてはh2タグ内の要素は中央配置、.point内ポイントイメージの画像は左揃え、.icon-wrapのアイコンはポイントイメージから右に30pxずらして配置し、最後に.about-textを疑似要素とコンテンツともに中央配置にしたいのですが、すべて中央に配置されてしまいます。 @media screen and (max-width: 900px)内.pointにかかっているmargin: 0 auto;を解除すれば解決するかと思ったのですが、それだと.about-textも左に寄ってしまいました。 ※文章ですと伝わりづらいかと思いますので、画像を添付します。 ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/8cb3383a-4c58-4d44-9d30-6a5954f4414a.png) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/68f1be57-78b7-409c-9600-ee78921b18db.png) ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-08/37f823b2-daf3-490d-91ff-719a033a148e.png) ### 該当のソースコード ```html

テキスト強調文
キャッチコピー

アイコン内テキスト

テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。
テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。テキストがここに入ります。

``` ```scss img{ width: 100%; height: auto; } container{ position: relative; width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 20px; .content-wrap{ position: relative; .about{ width: 100%; max-width: 1100px; h2{ display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 50px; font-size: 46px; .logo-img{ display: flex; flex-wrap: nowrap; align-items: baseline; font-size: 60px; line-height: 1.5; margin-bottom: 40px; } .emphasis{ display: contents; color: #2785ff; } } .point{ position: relative; > figure{ position: relative; max-width: 850px; &:after{ content: ''; display: block; position: absolute; bottom: -15px; right: -120px; width: 185px; height: 475px; background: url() no-repeat center center / cover; } } .icon-wrap{ display: flex; flex-wrap: nowrap; justify-content: start; align-items: center; flex-direction: column; position: absolute; top: -55px; right: -35px width: 275px; height: 275px; background: #2785ff; border: 2px solid #F0F0F0; border-radius: 50%; z-inde: -1; figure{ display: block; width: 30px; margin: 20px 0 15px 0; } span{ color: #FFF; font-size: 25px; } } .about-text{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; background: #ffe847; height: 350px; border-radius: 220px; p{ font-size: 28px; } } } } } } @media screen and (max-width: 900px){ .container{ .content-wrap{ .about{ h2{ flex-direction: column; align-items: center; margin-bottom: 50px; .logo-img{ margin-bottom: 25px; font-size: 30px; } } .point{ max-width: 600px; margin: 0 auto; > figure{ max-width: 600px; &:after{ width: 55px; height: 135px; botom: 0; right: -35px; } } .icon-wrap{ width: 120px; height: 120px; top: -40px; right: -30px; figure{ margin: 10px auto 5px; width: 20px; text-align: center; img{ width: 20px; } } span{ font-size: 15px; } } .about-text{ position: relative; height: 260px; margin-top: -20px; &:before{ content: ''; position: absolute; top: 0; left: 50%; display: block; width: calc(100vw + 13.7%); max-width: 600px; height: 100%; margin: 0; background: #ffe847; border-radius: 177px; transform: translate(-50%, 0); left: 50%; z-index: -1; } p{ font-size: 16px; } } } } } } } ``` ### 試したこと・調べたこと - [ ] teratailやGoogle等で検索した - [x] ソースコードを自分なりに変更した - [ ] 知人に聞いた - [ ] その他 ##### 上記の詳細・結果すでに記載していますが、@media screen and (max-width: 900px)内.pointにかかっているmargin: 0 auto;を解除すれば解決するかと思い解除したのですが、.about-textも左に寄ってしまいました。 ### 補足特になし

テキスト 強調文 キャッチコピー

テキスト強調文
キャッチコピー

	@@ -1 +1 @@
1	- ~~デバイ~~ス~~幅375pxの端末~~と~~899pxの端末でのデザインの差~~を~~極力減らし~~たいです
1	+ スマホ表示時に左揃えと中央揃えを切り替えたい

質問編集履歴