質問編集履歴
6
cssの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -54,6 +54,8 @@
|
|
|
54
54
|
|
|
55
55
|
```css
|
|
56
56
|
|
|
57
|
+
|
|
58
|
+
|
|
57
59
|
element.style {
|
|
58
60
|
|
|
59
61
|
padding: 10px;
|
5
html,cssの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -42,9 +42,47 @@
|
|
|
42
42
|
|
|
43
43
|
↓検証で確認するとこれが元になっているフォームだと思うのですが、これをどうにか変更してコンタクトフォームに書けば良いのでしょうか・・？
|
|
44
44
|
|
|
45
|
-
<div class="nd_options_float_left nd_options_box_sizing_border_box nd_options_width_100_percentage_all_iphone_important nd_options_padding_0_right_important_all_iphone nd_options_padding_0_left_important_all_iphone " style="padding: 10px; width:100%;"><span class="wpcf7-form-control-wrap bride-name"><input type="text" name="bride-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required bride" aria-required="true" aria-invalid="false" placeholder="ご新婦様のお名前"></span></div>
|
|
46
45
|
|
|
47
46
|
|
|
47
|
+
```html
|
|
48
|
+
|
|
49
|
+
<div class="nd_options_float_left nd_options_box_sizing_border_box nd_options_width_100_percentage_all_iphone_important nd_options_padding_0_right_important_all_iphone nd_options_padding_0_left_important_all_iphone " style="padding: 10px; width:50%;"><span class="wpcf7-form-control-wrap groom-name"><input type="text" name="groom-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="ご新郎様のお名前"></span></div>
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
|
|
57
|
+
element.style {
|
|
58
|
+
|
|
59
|
+
padding: 10px;
|
|
60
|
+
|
|
61
|
+
width: 50%;
|
|
62
|
+
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.nd_options_float_left {
|
|
66
|
+
|
|
67
|
+
float: left;
|
|
68
|
+
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.nd_options_box_sizing_border_box {
|
|
72
|
+
|
|
73
|
+
box-sizing: border-box;
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
user agent stylesheet
|
|
78
|
+
|
|
79
|
+
div {
|
|
80
|
+
|
|
81
|
+
display: block;
|
|
82
|
+
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
```
|
|
48
86
|
|
|
49
87
|
### 試したこと
|
|
50
88
|
|
4
リンクを削除済み
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
wordpressの有料テーマ内にあったコンタクトフォームを元に自身でアレンジをしてフォームを作成しました。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
@@ -10,7 +10,15 @@
|
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
+
【↓元のフォーム】
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
【↓自身でアレンジしたフォーム】
|
|
20
|
+
|
|
13
|
-
|
|
14
22
|
|
|
15
23
|
|
|
16
24
|
|
|
@@ -50,9 +58,7 @@
|
|
|
50
58
|
|
|
51
59
|
|
|
52
60
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
62
|
|
|
57
63
|
### 補足情報（FW/ツールのバージョンなど）
|
|
58
64
|
|
3
画像に関せる説明を変更済み
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,10 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
こちら→ http://ur0.link/PIUj のコンタクトフォームを元に自身でアレンジをしてフォームを作成しました。
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
※自己解決方法に表示例有り。
|
|
10
6
|
|
|
11
7
|
|
|
12
8
|
|
|
@@ -46,7 +42,7 @@
|
|
|
46
42
|
|
|
47
43
|
|
|
48
44
|
|
|
49
|
-
新郎詳細をclass:groom、CSSに float: left!important;、width: 50%!i、新婦詳細をclass:bride、CSSに float: right!important;、width: 50%!important;と書いてみたのですが、下の
|
|
45
|
+
新郎詳細をclass:groom、CSSに float: left!important;、width: 50%!i、新婦詳細をclass:bride、CSSに float: right!important;、width: 50%!important;と書いてみたのですが、下の画像のように、新郎詳細が左寄り、右50％は空白、その下に、左50％が空白、左寄りに新婦詳細になり、思うようになりません、、、
|
|
50
46
|
|
|
51
47
|
|
|
52
48
|
|
2
自己解決欄の画像をこちらに再添付しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -11,6 +11,10 @@
|
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
URLのP表示が良いのですが、スマホ表示を新郎詳細(お名前→フリガナ→・・・)の次に新婦詳細が表示されるようにするにはフォームをどのように書いて、CSSをどのように書いたら良いかが解りません、、、＞＜
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|
|
@@ -50,6 +54,10 @@
|
|
|
50
54
|
|
|
51
55
|
|
|
52
56
|
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
53
61
|
### 補足情報（FW/ツールのバージョンなど）
|
|
54
62
|
|
|
55
63
|
|
1
画像のリンクを消し、自己解決方法欄に画像を投稿しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
※自己解決方法に表示例有り。
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
|
|
45
|
-
新郎詳細をclass:groom、CSSに float: left!important;、width: 50%!i、新婦詳細をclass:bride、CSSに float: right!important;、width: 50%!important;と書いてみたのですが、
|
|
45
|
+
新郎詳細をclass:groom、CSSに float: left!important;、width: 50%!i、新婦詳細をclass:bride、CSSに float: right!important;、width: 50%!important;と書いてみたのですが、下の自己解決方法に載せた表示のように、新郎詳細が左寄り、右50％は空白、その下に、左50％が空白、左寄りに新婦詳細になり、思うようになりません、、、
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|