Wordpress作成サイトで【PC・スマホ双方でボタンを同じ見た目で表示したい】

前提・実現したいこと

◯要旨
・Wordpressで作成したサイトで【PC・スマホ双方でボタンを同じ見た目で表示したい】です

発生している問題・エラーメッセージ

◯詳細
・Ninja Formsで作成したボタンがスマホでは次の様に表示されます
└全体が白味がかっている
└ボタンサイズが縮小されている
◯URL・仕様など
・該当ページ：https://job.bookstone.jp/?page_id=18
・該当箇所：「応募する（無料）」というボタン
└下記に追加CSSを掲載
・テーマ：coccon（https://wp-cocoon.com/）
・プラグイン：Ninja Forms
・テストしたスマホ：iphone8

該当のソースコード

CSS
1#nf-field-9 {
2  border-radius: 25px;
3  background-color: #1E50A2;
4  font-weight: 700;
5}

試したこと

・Ninja Formsを使用せずに作成したボタンはPC・スマホ双方で同じ様に表示されました
・cocconを使用せずに、Ninja Formsで作成したボタンはPC・スマホ双方で同じ様に表示されました

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンについては正確には下記内容のCSSが使われています。

cocconのスタイルシートの内容とNinja Formsのスタイルシートの内容で一部被りがあり
この様な状態になっているかと思われます。
(いまこのボタンに対して8ファイルのCSS内容から成り立っています。)
完全にそろえるにはだいぶ調整が必要かと思いますので、
この状態であきらめるか、cocconのテーマを使わない方法を考えられたほうが良いかと思います。

※ ボタンだけなら「css デザインボタン」で色々なパターンが検索できます。

CSS
1#nf-field-11 {
2    border-radius: 25px;
3    background-color: #1E50A2;
4    font-weight: 700;
5}
6.nf-form-content button, .nf-form-content input[type="button"], .nf-form-content input[type="submit"] {
7    background: #333;
8    background-color: rgb(51, 51, 51);
9    border: 0;
10    color: #f7f7f7;
11    transition: all .5s;
12}
13.nf-form-content .listselect-wrap .nf-field-element div, .nf-form-content input.ninja-forms-field, .nf-form-content select.ninja-forms-field:not([multiple]) {
14    height: 50px;
15}
16.field-wrap > div input[type="checkbox"], .field-wrap button, .field-wrap input[type="button"], .field-wrap input[type="submit"] {
17    width: auto;
18}
19.nf-form-content .listselect-wrap .nf-field-element div, .nf-form-content .ninja-forms-field {
20    font-size: 16px;
21    margin: 0;
22    padding: 12px;
23}
24.nf-field-element input, .nf-field-element select, .nf-field-element textarea {
25    vertical-align: inherit;
26}
27.ninja-forms-form-wrap *, .ninja-forms-form-wrap ::after, .ninja-forms-form-wrap ::before {
28    box-sizing: border-box;
29}
30* {
31    overflow-wrap: break-word;
32}
33.entry-content > *, .demo .entry-content p {
34    line-height: 1.8;
35}
36body {
37    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
38}
39:root {
40    --wp-admin-theme-color: #007cba;
41    --wp-admin-theme-color-darker-10: #006ba1;
42    --wp-admin-theme-color-darker-20: #005a87;
43}