WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ ウィジェットのCSSを修正してほしい

  • ウィジェットのCSSを修正してほしい

    トピックス by karen ユーザーランク 350 pt  2023年10月16日 14:23 134 PV

    【相談内容】

    既存の「まとめリスト」というウィジェットを編集し、下記画像のまで完成させたのですが、「その1」という緑の部分と、その後に続く文章が段落が分かれないように、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”>その1</dt>

    <dd>最短5分で診察スタート</dd>

    </div>

    <div class=”attention”>

    <p class=”item”>※待ち時間によって左右することがあります</p>

    </div>

    <div class=”group”>

    <dt class=”bg_green”>その2</dt>

    <dd>コロナウイルス・インフルエンザ検査にも対応。</dd>

    </div>

    <div class=”group”>

    <dt class=”bg_green”>その3</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”>その1</dt>

    <dd>診察や医師到着までの待ち時間がわかる!</dd>

    </div>

    <div class=”group”>

    <dt class=”bg_green”>その2</dt>

    <dd>薬の処方・受け取りまで自宅で完結。その場で数日分の薬を処方してもらえるので、翌日病院に行く必要なし!</dd>

    </div>

    <div class=”group”>

    <dt class=”bg_green”>その3</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;

    }

    }

    widgetマスター   7 月, 1 週間前 2 人 · 7 コメント
  • 7 コメント
  • widgetマスター

    モデレータ
    2023年10月16日 14:50

    ご相談ありがとうございます!

    確認しますね☺

    不明点でてきましたらこちらから質問させてください!

  • widgetマスター

    モデレータ
    2023年10月16日 15:09

    いただいたコードでは再現ができずでして😢

    編集しているページのURLを共有いただけますか??

  • widgetマスター

    モデレータ
    2023年10月17日 14:54

    おまたせいたしました!

    下記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;
    }
    • karen

      メンバー
      2023年10月19日 14:35

      画像の通りに変更できました!

      ありがとうございます!

    • widgetマスター

      モデレータ
      2023年10月19日 15:51

      よかったです☺