実現したいこと
以下がデスクトップで表示したい時のコードです。
html
12<!DOCTYPE html>3<html lang="jp">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <link rel="stylesheet" href="style.css">8 <title>Document</title>9</head>10<body>11 12 <div class="container">13 14 <section class="concept">15 <h2>CONCEPT</h2>16 <div class="first">17 <img class="block" src="img/first-pic.jpg" alt="">18 <div class="text">19 <div class="h3">20 <h3 class="text-animation">キャッチコピー</h3>21 </div>22 <p class="section-textstyles">テキストテキストテキストテキストテキストテキストテキストテストテキストテキストテキストテキストテキストテキスト。 23 テキストテキストテキストテキストテキストテキスト</p>24 </div>25 </div>26 <div class="second">27 <img class="block" src="img/second-pic.jpg" alt="">28 <div class="text">29 <h3 class="text-animation">キャッチコピー</h3>30 <p class="section-textstyles">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。 31 テキストテキストテキストテキストテキストテキスト</p>32 </div>33 </div>34 </section>35 </div>36</body>37</html>
css
1html {2 margin: auto;3 font-size: 100%;4 color: #79431F;5 font-family: "Suranna", serif;6 font-weight: 400;7 font-style: normal;8 letter-spacing: 1px;9 scroll-behavior: smooth;10}11.container {12 max-width: 1000px;13 margin: auto;14}15h2 {16 font-size: 2rem ;17 margin-bottom: 20px;18}19h3 {20 font-size: 1.5rem;21 margin-top: 3%;22 margin-bottom: 3%;23 letter-spacing: 3px;24}25 26/* ----------concept---------- */27.concept {28 margin: 20px auto;29}30.concept .first {31 display: flex;32 margin-top: 20px;33}34.concept .second {35 display: flex;36 margin-top: 20px;37 flex-direction: row-reverse;38}39.concept img {40 width: 60%;41 align-self: flex-start;42}43.concept .text {44 width: 40%;45}46.concept h2{47 margin-left: 40px;48}49.concept h3 {50 text-align: center;51 margin-top: 60px;52}53.concept p {54 padding: 60px 40px 60px 40px;55}56 57 58
発生している問題・分からないこと
上記の状態から、スマホ表示として幅600px以下の時、
ブラウザでの見え方を上から順に以下のようにしたいです。
class="text"の親要素の中にある<h3>と<p>の間に画像を入れたいのです。
説明がわかりづらくて申し訳ありあません！
教えて頂きたいです！
該当のソースコード
特になし
試したこと・調べたこと
上記の詳細・結果
position:relative;など試したのですがうまく動かなかったです。親要素のサイズの設定が難しくて。
補足
特になし
0 コメント