Home › Forums › Quform WordPress › Setting a value to a div in a html field › Reply To: Setting a value to a div in a html field
Hi Ally,
I am working in a localhost so I can’t send the link, but I have no problem with sending you the css code.
Must tell you I am using a Kadence theme.
I am attaching a couple of images: searchForm_1 is when the page (in wordpress) load with the form. (Remember that form has an html field with a section inside which id is “resultado”), here the display is a mess.
The searchForm_2 presents the search already done with the form.
Thanks for your help.
This is the scss code. If you prefer the css I can send you.
Line 61 is the “cardGratis” format, the box with the black border and white background.
Line 29 is the “card” format, the box the acqua background.
01 /* Declaro variables para colores */
02 :root{
03 –azul: #1e8cfa;
04 //–acqua: hsl(159, 96%, 40%);
05 –acqua:#22c1c3;
06 –gris: rgba(128, 128, 128, 0.767) ;
07 –blanco: hsl(0, 0%, 100%);
08 –acqua-claro: #22c0c333;
09 –negro:black;
10 }
11
12 // Hago que todo se comprima al tamaño de la caja
13 html {
14 box-sizing: border-box;
15 }
16
17 // todos los elementos previos y posterior adoptan esa propiedad
18 *, *:before *:after{
19 box-sizing: inherit;
20 }
21
22 .contenedor{
23 display: grid;
24 gap: 1rem;
25 grid-auto-flow: dense;
26 grid-template-columns: repeat(auto-fill,minmax(min(100%,20rem), 1fr));
27 }
28
29 .card {
30 background-color: var(–acqua-claro);
31 padding: 5px;
32 text-align: center;
33 border-radius: 10px;
34 box-shadow: 1px 2px 5px gray;
35
36 &-header {
37 border-bottom: 2px solid var(–acqua);
38 }
39
40 &-body{
41 font-size: medium;
42 padding-left: 2rem;
43 text-align: left;
44 border-bottom: 2px solid var(–acqua);
45 p {
46 font-size: smaller;
47 }
48 }
49
50 &-footer{
51 background-color: var(–acqua);
52
53 &-enlace {
54 color: white;
55 text-decoration:none;
56 }
57 }
58
59 }
60
61 .cardGratis {
62 //background-color: var(–gris);
63 width: 300px;
64 height: 100px;
65 padding: 3px;
66 text-align: center;
67 border-radius: 10px;
68 border: 1px solid black;
69 box-shadow: 1px 2px 5px gray;
70 box-sizing: border-box;
71
72 &-header {
73 border-bottom: 2px solid var(–negro);
74 }
75
76 &-body{
77 font-size: small;
78 padding-left: 2rem;
79 text-align: left;
80 p {
81 font-size: smaller;
82 }
83 }
84
85 }
86
87 // para quforms
88 /* Fix UI issue for readyonly field */
89 .qfb-settings input[type=text][readonly]{
90 cursor: not-allowed;
91 }
92 .qfb-settings input[type=text][readonly]:focus {
93 cursor: not-allowed;
94 }