フィールド間隔を狭くしたい

kintone カスタマイズ
1

いつもお世話になっております。

フィールド間隔を狭くしたいため、以下のように設定しました。

.ui.form .row:nth-child(1){
margin-bottom:-20px;
}

パソコンのブラウザでは想定通り間隔が狭くなりましたが、スマホで見るとフィールド間隔の設定が効いてませんでした。Chromeで見てみると、以下のように指定されてました。

@media only screen and (max-width: 767px){
margin : 0;
}

そのためcssで以下のように指定しましたが、設定が無効にされているようです。
@media screen and (max-width: 750px) {
margin-bottom:-20px;
}

スマホでもフィールド間隔を狭くするにはどのように設定すればよいでしょうか。
ご教授、よろしくお願いいたします。

2

dom0121さん

お世話になっております．

CSSは，セレクタが詳細にかかれているものから優先して適用されます．
CSSセレクタ詳細度の理解を深める

スマホ版では，下記のCSSが読み込まれています．

.ui.stackable.grid:not(.vertically)>.row {
  margin: 0;
  padding: 0;
}

下記のように，セレクタの詳細度を上記のCSS以上にすれば，そちらが優先されます．

.ui.stackable.grid:not(.vertically)>.row:nth-child(1){
  margin-bottom: -20px;
}
3

江田さま

確認できました。

ありがとうございました。