Edit css booking form

Hi fcjunic,

You’re going to want to do something like this:

.rtb-booking-form fieldset > div {
    float: left;
    width: 33%;
}

You’ll probably also need to clear the floats in your fieldset. If you don’t already have a clearfix technique, try this:

.rtb-booking-form fieldset:before,
.rtb-booking-form fieldset:after {
    content: " ";
    display: table;
}

.rtb-booking-form fieldset:after {
    clear: both;
}

Hi,

Thanks for your help ! Great support ??

Great help!
Thank you!

Hi, Few mounths ago I edit my form with this tips and that’s all done.
I edit the form in orizzontally, I changed the color, etc…

After the latest wordpress/plugin version, something went wrong.
The formatting is not right.
I don’t know how to resolve…

Is the shortcode name the same? [booking-form]

Please, can you help me?
Thank you

https://www.ristorantelangelo.com/prenota un tavolo

This is the css code:
.rtb-booking-form fieldset > div {
float: left;
width: 33%;
}

.rtb-booking-form fieldset:before,
.rtb-booking-form fieldset:after {
content: ” “;
display: table;
}

.rtb-booking-form fieldset:after {
clear: both;
}

/* form prenotazione tavolo – colori – icone
————————————————————– */

.rtb-booking-form {
border:10px solid #52a1a8 !important;
padding-top:40px;
padding-left:80px;

}

body {
color: #52a1a8;

}

.rtb-booking-form label:before {
display: inline-block;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 32px;
font-family: dashicons;
text-decoration: inherit;
font-weight: 400;
font-style: normal;
vertical-align: top;
text-align: center;
-webkit-transition: color 0.1s ease-in 0;
transition: color 0.1s ease-in 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.rtb-booking-form .date label:before {
content: “\f508”;
}

.rtb-booking-form .time label:before {
content: “\f469”;
}

.rtb-booking-form .party label:before {
content: “\f338”;
}

.rtb-booking-form .name label:before {
content: “\f464”;
}

.rtb-booking-form .phone label:before {
content: “\f525”;
}

.rtb-booking-form .email label:before {
content: “\f466”;
}

.rtb-booking-form .message label:before {
content: “\f125″;
}

/* form prenotazione tavolo – dimensioni font form
————————————————————– */
label, legend {

font-weight: thin;
font-size: 15px;
}

}

/* form prenotazione tavolo colore button
————————————————————– */

.button, button, a.price-send, input[type=”submit”], input[type=”reset”], input[type=”button”], .button.green, button.green, input.green[type=”submit”], input.green[type=”reset”], input.green[type=”button”] {

background: #52a1a8;
}

.button:hover, button:hover, a.price-send:hover, input[type=”submit”]:hover, input[type=”reset”]:hover, input[type=”button”]:hover, .button.green:hover, button.green:hover, input.green[type=”submit”]:hover, input.green[type=”reset”]:hover, input.green[type=”button”]:hover {
background: #315f63;
}

/* togliere ICAL da Events Calendar
————————————————————– */

a.tribe-events-ical {
display:none!important;
}

/* colore pulsante webnus button
————————————————————– */
.button.theme-skin {
background-color: #52a1a8;
}

/* colore social in top-bar
————————————————————– */
.top-bar .socialfollow i {
color:#2a5766;
}

/* testo titoli footer allineato a sx
————————————————————– */
.footer-in h5.subtitle {
text-align: left;
}

/* diminuito margin bottom di blocco titolo footer in origine 15px 0 25px 0
————————————————————– */
.footer-in h5.subtitle, .toggle-top-area h5.subtitle {
margin: 15px 0 15px 0;
}

Hi @morganaeffect,

Were you able to resolve this? I went to the link you sent and I don’t see any problem with the form. It appears in a 3-column layout to me.

(Nothing’s changed about the [booking-form] shortcode.)