CSS style form horizontally

Is possible remove text: Book a Table and Contatct information ? Thanks in advance !

Hi hanus,

If you can post a link to the booking form on your website I may be able to provide some CSS code to get you started with a two-column layout.

You can hide the fieldset legends (Book a Table / Contact Information), but you should keep them there so that visitors using screen readers can make use of them. You can change the text by using a translation plugin, like Loco Translate.

Hi, thank you for your quick response and willingness !
Link for booking form:
https://www.fotosoft.cz/rezervace/
I do not know how to style after reduction for mobile device that sort after colums under iself.
Also make the button in centre and style the fields height like here :
https://www.fotosoft.cz/
Hide fieldset legends (Book a Table / Contact Information) I would like because want to use same styling
like in other headlines. I think the two are not needed.

here is css which I have used -I do not know if its correct:)

.rtb-booking-form form input {
font-weight: normal;
margin-bottom: 15px;
max-width: 100%;
background: #fff;
border: 1px solid #b7b6b6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

.rtb-booking-form {
border:0px solid #fff;
margin: 0 auto;
max-width: 700px;
padding: 30px;
}
.rtb-booking-form fieldset {
float: left;
width: 50%;
padding: 5px;
}

.rtb-booking-form button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
padding: .4em 1.5em .4em 1.5em;
color: #fff;
background: #b18335;
border: 2px solid #b18335;
text-transform: uppercase;
font-size: 16px;
font-weight: 600;
font-family: ‘Open Sans’,sans-serif;
text-shadow: none;
margin-right: 5px;
text-shadow: none;
-webkit-appearance: none;
letter-spacing: 2px;
box-shadow: 0 0 0 0 !important;
line-height: 1.5 !important;
border-radius: 3px;
-webkit-transition: color .2s linear, background .1s linear, opacity .2s linear;
-moz-transition: color .2s linear, background .1s linear, opacity .2s linear;
-ms-transition: color .2s linear, background .1s linear, opacity .2s linear;
-o-transition: color .2s linear, background .1s linear, opacity .2s linear;
transition: color .2s linear, background .1s linear, opacity .2s linear;
}

.rtb-booking-form button:hover {
opacity: 0.8 !important;
}

Hi hanus,

It looks like you’ve already got the fieldsets sitting side-by-side with this code:

.rtb-booking-form fieldset {
  float: left;
  width: 50%;
  padding: 5px;
}

If you want them to only appear side-by-side on larger screens, you can use a media query like this:

@media(min-width: 767px) {
  .rtb-booking-form fieldset {
    float: left;
    width: 50%;
    padding: 5px;
  }
}

If you want to hide the form legends without undermining the accessibility of your form, you can use the following:

.rtb-booking-form legend {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  left: -2000px;
}

Than you veri much !