CSSカスタマイズ 追加画面 編集画面

[amic]

１．実現したいこと
追加画面、編集画面を余白部分を縮小し、コンパクトに表示できるように
CSSでカスタマイズしたいです。

２．発生した問題
詳細表示画面ではCSSカスタマイズできました。
しかし、ほぼ同じ画面の追加画面、編集画面は、class名が同一項目ですが、
CSSでカスタマイズした内容に表示がかわりません。

３．実行したソースコードは下記です。

  /* 各フィールドの枠（row）の上下の余白をゼロに */
  .row-gaia.clearFix-cybozu {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

追加画面、編集画面は、class名が同じでもCSSの指定方法が異なるのでしょうか。ご教授いただけると助かります。

[Maple (もみじ)]

これで .row-gaia 内の要素の余白も消したら何とかなりませんか？

.control-gaia,
.control-label-gaia,
.control-value-gaia,
.control-design-gaia {
  margin: 0 !important;
  padding: 0 !important;
}

[amic]

ご連絡、ありがとうございます。
試してみます。
よろしくお願いします。

2025年4月22日(火) 15:59 cybozu developer community 経由の もみじ <notifications@cybozu.discoursemail.com>:

[amic]

もみじ様

試してみてうまく画面が変更できました。
ありがとうございます。
Webとかいろいろ探しても出てきませんでした。
クラスの選定の仕方が重要なことが理解できました。
要素の余白もそうですが、詳細画面は表示のみの為、hightが約30px、
追加・編集画面は40pxになっており、この差が画面表示イメージの
違いを生んでいるように見えます。
こちらの変更もトライしてみます。