「post_1」の後にカスタムHTMLを追加する方法(パート2)

こんにちは、

これを行うには、いくつかの CSS を使用する必要があります。:slightly_smiling_face:

Common (CSS) のモバイルおよびデスクトップ表示で、画像に 100% の幅を追加してください。

#custom-ad {
  .custom-ad-link {
    img {
      width: 100%;
    }
  }
}

デスクトップ (CSS) 表示では、#custom-ad ID に最大幅を追加して、バナー幅をトピックのアバター + トピック本文と同じに設定します。これは、上記で Common に追加した画像の 100% 幅になります。

#custom-ad {
  max-width: calc(45px + 690px + (11px * 2));
}

45px = トピックアバターの幅
690px + (11px * 2) = トピック本文の幅と、.cooked クラスで使用されている左 11px と右 11px のパディング。

見た目は以下のようになります :arrow_down:

デスクトップ表示(全体)


デスクトップ表示(レスポンシブ)


モバイル表示