-
ウィジェットのCSSを修正してほしい
トピックス by
350 pt
2023年10月16日 14:23
236
PV
【相談内容】
既存の「まとめリスト」というウィジェットを編集し、下記画像のまで完成させたのですが、「その１」という緑の部分と、その後に続く文章が段落が分かれないように、CSSを修正していただきたいです。（その後に続く文章の文字数が増えると自動で段落が別れてしまいます）
既存ウィジェットを無理に編集したので、かなりわかりにくくなっているかと思いますが、よろしくお願いいたします。
【画像widjetのHTML】
<div class=”items”>
<div class=”item__box”>
<div class=”num__box”>
<p class=”num”><span class=”_big”>オンライン診療</span></p>
</div>
<dl class=”detail”>
<div class=”group”>
<dt class=”bg_green”>その１</dt>
<dd>最短5分で診察スタート</dd>
</div>
<div class=”attention”>
<p class=”item”>※待ち時間によって左右することがあります</p>
</div>
<div class=”group”>
<dt class=”bg_green”>その２</dt>
<dd>コロナウイルス・インフルエンザ検査にも対応。</dd>
</div>
<div class=”group”>
<dt class=”bg_green”>その３</dt>
<dd>処方された薬は薬局or自宅での受け取りが選択可能。当日宅配にも対応！</dd>
</div>
<div class=”attention”>
<p class=”item”>※当日宅配は、日によって満枠により承れない場合があります</p>
</div>
</dl>
</div>
<div class=”item__box”>
<div class=”num__box”>
<p class=”num”><span class=”_big”>往診</span></p>
</div>
<dl class=”detail”>
<div class=”group”>
<dt class=”bg_green”>その１</dt>
<dd>診察や医師到着までの待ち時間がわかる！</dd>
</div>
<div class=”group”>
<dt class=”bg_green”>その２</dt>
<dd>薬の処方・受け取りまで自宅で完結。その場で数日分の薬を処方してもらえるので、翌日病院に行く必要なし！</dd>
</div>
<div class=”group”>
<dt class=”bg_green”>その３</dt>
<dd>診察後はオペレーター（看護師）に相談可能で安心♪</dd>
<p><br></p>
</div>
</dl>
</div>
</div>
【CSS】
.items {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.item__box {
width: calc(48.5% – 20px);
padding: 10px 0px 10px 10px;
margin-right: 3%;
margin-top: 45px;
background: #fff;
border-radius: 10px;
border: 2px solid #333;
box-shadow: 3px 5px 3px 3px rgba(0, 0, 0, 0.3);
position: relative;
}
.item__box:nth-of-type(even) {
margin-right: 0;
}
.num__box {
padding: 9px;
background: #ddfdf5;
display: flex;
position: absolute;
top: -20px;
}
.num__box .num {
margin: 0;
line-height: 1;
color: #216D5F;
font-size: 18px;
font-weight: bold;
}
.num__box .num ._big {
font-size: 18px;
margin-left: 0px;
}
.itemHead {
color: #3bb072;
font-size: 24px;
text-align: center;
font-weight: bold;
margin: 0;
}
.detail {
margin-top: 5px;
}
.detail .group {
width: auto;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 10px;
}
.detail dt {
font-weight: bold;
color: #333;
font-size: 15px;
border: 3px solid #333;
border-radius: 5vw;
padding: 2px 10px;
margin-right: 10px;
}
.detail dd {
margin: 0;
color: #333;
font-weight: bold;
margin: 6px 0 6px;
font-size: 15px;
}
.detail .attention {
width: 100%;
font-size: 12px;
color: #666;
}
.detail .group+.attention {
margin-top: 10px;
}
.detail .attention .item {
margin: 0;
}
.detail .bg_green {
background: #3bb072;
border-color: #3bb072;
color: #fff;
}
.detail .bg_line {
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 0, 1) 51%, rgba(255, 255, 0, 1) 100%);
}
@media screen and (max-width:600px) {
.comment__area {
width: calc(100% – 20px);
margin-top: 20px;
padding: 0 10px 20px;
}
.headImg {
top: -10px;
}
.headImg img {
width: 100%;
height: auto;
}
.headText {}
.headText .text {
font-size: 40px;
}
.subHead__box .head {
font-size: 20px;
margin: 5px 0 0;
}
.subHead__box .head ._bold {
font-size: 24px;
}
.item__box {
width: 100%;
padding: 20px 10px 10px;
margin-right: 0;
}
.fukidashi {
transform: rotate(10deg) scale(0.6);
transform-origin: center;
position: absolute;
top: -40px;
right: -16px;
}
.num__box {
padding: 6px 10px;
}
.num__box .num {
font-size: 16px;
}
.num__box .num ._big {
font-size: 20px;
}
.itemHead {
font-size: 20px;
}
.detail {
margin-top: 5px;
}
.detail .group {
margin-top: 5px;
}
.detail dt {
font-size: 14px;
border-width: 2px;
padding: 2px 8px;
margin-right: 8px;
}
.detail dd {
margin: 4px 0 4px;
font-size: 14px;
}
.detail .attention {
font-size: 10px;
}
.detail .group+.attention {
margin-top: 5px;
}
}
-
7 コメント
-
ご相談ありがとうございます！
確認しますね☺
不明点でてきましたらこちらから質問させてください！
-
いただいたコードでは再現ができずでして😢
編集しているページのURLを共有いただけますか？？
-
こちらのURLになります。
【Ver.30644の複製】の一番上のウィジェットです。
https://app.squadbeyond.com/ab_tests/llLi_AQXoLVzjqqfvrFEw/articles
-
1 年, 1 月前
karenが変更
-
1 年, 1 月前
-
ありがとうございます！
-
-
おまたせいたしました！
下記CSS調整してください！
.items { width: 100%; display: flex; flex-wrap: wrap; /* 追加 */ justify-content: space-between; } .item__box { /* 下記3つ修正 */ width: calc(50% - 10px); padding: 10px; margin-right: 0; /* 追加 */ box-sizing: border-box; margin-top: 45px; background: #fff; border-radius: 10px; border: 2px solid #333; box-shadow: 3px 5px 3px 3px rgba(0, 0, 0, 0.3); position: relative; } .detail dd { margin: 0; color: #333; font-weight: bold; margin: 6px 0 6px; font-size: 15px; /* 追加 */ flex: 1; }-
画像の通りに変更できました！
ありがとうございます！
-
よかったです☺
-
