画像とコンテンツを含むレスポンシブなページをデザインする

Question

私はフロントエンドの初心者で、レイアウトと応答性の扱いにいくつかの問題を抱えています。

これはこれまでの私のコードです:

リーリー リーリー

これまでの私の試みをご覧ください。これが私が達成したいことです: https://www.figma.com/file/lqy0NTOiakaxeG5HoJk50f/Untitled?node-id=0:1。

これがかなり基本的なことであることはわかっていますが、何を試しても、常に何か他の問題が発生します。

Answer 1

CSS グリッドを使用して、テキストの横に画像とボタンを配置します。

また、ボタンと画像を div でラップします (クラス名 right-col を付けました):

リーリー

すべてのコードを最大幅のラッパーでラップし、タイトルとコンテンツの両方を 100% にすることもできます。