初心者アイコンの付け方にいま気が付きましたのでつけてみました!
どうやって質問したら伝わるのかわかりませんが
タイトルにあるような「css 直し方」だったり「css 一箇所 修正」などでggってみましたが
わからなかった為質問します。
前提・実現したいこと
スマホでみたときにレイアウトがおかしい、直したいです。
Aさん画像(年・Aさん・所属)
◯◯◯◯◯◯◯◯◯Bさん画像(年・Bさん・所属)
Cさん画像(年・Cさん・所属)
◯◯◯◯◯◯◯◯◯Dさん画像(年・Dさん・所属)
というふうに並べたい。
◯はスペースなので無視して下さい。
発生している問題・エラーメッセージ
Aさん画像(年・Aさん・所属)
◯◯◯◯◯◯◯◯Bさん画像(年・Bさん・所属)
◯◯◯◯◯◯◯◯◯◯◯◯◯Cさん画像
(年・Cさん・所属)
Dさん画像(年・Dさん・所属)
となってしまっています・・・。
該当のソースコード
HTML
1 <div class="wrap_catch_profile"> 2 <div class="box_employee_ct inner"> 3 <div class="employee_ct"> 4 <div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/05.png" alt=""></div> 5 <div class="year_ct">2015年</div> 6 <div class="name_ct">Aさん</div> 7 <div class="department_ct">人事</div></p> 8 </div> 9 <div class="employee_ct"> 10 <div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/02.png" alt=""></div> 11 <div class="year_ct">2015年</div> 12 <div class="name_ct">Bさん</div> 13 <div class="department_ct">総務</div></p> 14 </div> 15 <div class="employee_ct"> 16 <div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/03.png" alt=""></div> 17 <div class="year_ct">2017年</div> 18 <div class="name_ct">Cさん</div> 19 <div class="department_ct">事務</div></p> 20 </div> 21 <div class="employee_ct"> 22 <div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/04.png" alt=""></div> 23 <div class="year_ct">2018年</div> 24 <div class="name_ct">Dさん</div> 25 <div class="department_ct">営業</div></p> 26 </div> 27 </div>
CSS
1 #crosstalk .mv_ct .mv_ph { 2 display: flex; } 3 #crosstalk .mv_ct .mv_ph li { 4 flex: 1; } 5 #crosstalk .mv_ct .mv_ph li img { 6 width: 100%; 7 height: 100%; 8 min-height: 540px; 9 z-index: 1; } 10 @media only screen and (max-width: 750px) { 11 #crosstalk .mv_ct .mv_ph li img { 12 min-height: 280px; } } 13#crosstalk .wrap_catch_profile { 14 background: #f8fafe; 15 padding: 0 0 64px; } 16 @media only screen and (max-width: 480px) { 17 #crosstalk .wrap_catch_profile { 18 padding: 0 0 40px; } } 19#crosstalk .box_employee_ct { 20 background: url(../images/common/bg_dot.png) repeat; 21 display: flex; 22 width: 90%; 23 justify-content: center; 24 padding: 40px 20px; 25 margin-top: -72px; 26 z-index: 1; 27 position: relative; } 28 #crosstalk .box_employee_ct .employee_ct { 29 text-align: center; 30 padding-right: 140px; 31 position: relative; } 32 #crosstalk .box_employee_ct .employee_ct:after { 33 content: ""; 34 display: block; 35 width: 72px; 36 height: 72px; 37 background: url(../images/pages/icon_cross.png) no-repeat; 38 background-size: contain; 39 background-position: center; 40 position: absolute; 41 right: 12%; 42 top: 50%; 43 margin-top: -36px; } 44 #crosstalk .box_employee_ct .employee_ct:last-of-type { 45 padding-right: 0 !important; } 46 #crosstalk .box_employee_ct .employee_ct:last-of-type:after { 47 display: none !important; } 48 #crosstalk .box_employee_ct .employee_ct .img_ct { 49 margin-bottom: 10px; } 50 #crosstalk .box_employee_ct .employee_ct .year_ct { 51 color: #d2a710; 52 font-size: 15px; } 53 #crosstalk .box_employee_ct .employee_ct .name_ct { 54 color: #d2a710; 55 font-size: 32px; 56 letter-spacing: 1px; 57 margin-bottom: 8px; } 58 #crosstalk .box_employee_ct .employee_ct .department_ct { 59 font-size: 14px; } 60 @media only screen and (max-width: 1200px) { 61 #crosstalk .box_employee_ct { 62 padding: 20px; } 63 #crosstalk .box_employee_ct .employee_ct { 64 padding-right: 80px; } 65 #crosstalk .box_employee_ct .employee_ct:after { 66 width: 56px; 67 right: 6%; } } 68 @media only screen and (max-width: 750px) { 69 #crosstalk .box_employee_ct { 70 margin-top: -40px; } 71 #crosstalk .box_employee_ct .employee_ct { 72 padding-right: 50px; } 73 #crosstalk .box_employee_ct .employee_ct:after { 74 width: 32px; 75 right: 6%; } 76 #crosstalk .box_employee_ct .employee_ct .img_ct img { 77 width: 72px; } 78 #crosstalk .year_ct{ 79 font-size: 10px; } 80 #crosstalk .box_employee_ct .employee_ct .year_ct { 81 font-size: 12px; } 82 #crosstalk .box_employee_ct .employee_ct .name_ct { 83 font-size: 18px; 84 margin-bottom: 2px; } 85 #crosstalk .box_employee_ct .employee_ct .department_ct { 86 font-size: 10px; } } 87 @media only screen and (max-width: 480px) { 88 #crosstalk .box_employee_ct { 89 padding: 20px 20px; 90 display: block; } 91 #crosstalk .box_employee_ct .employee_ct { 92 padding: 0; 93 flex-basis: 47%; 94 margin-bottom: 10px; 95 border-bottom: 1px solid #eee; 96 padding-bottom: 10px; 97 text-align: left; } 98 #crosstalk .box_employee_ct .employee_ct:last-of-type { 99 border-bottom: 0; 100 padding-bottom: 0; 101 margin-bottom: 0; } 102 #crosstalk .box_employee_ct .employee_ct:after { 103 display: none; } 104 #crosstalk .box_employee_ct .employee_ct .img_ct { 105 float: left; 106 margin-right: 20px; } } 107
試したこと
空間が折り返されてる?のかと思い、nowrapを記述してみました・
→余計おかしくなりました・・・。
補足情報(FW/ツールのバージョンなど)
WordPress 5.0.4 (shinetsu-child テーマ)
わかりづらいとは思いますが、まるまるサイトを載せるわけにもいかず・・・。
説明が不足している!などありましたらご指摘いただけると助かります!
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。