Adjust widget HTML code

Hi,

In the first line, please add text-center to the class attribute, so it should displayed like this:
<div id="rm_reservation" class="section-content text-center">

If its not working, please share your site URL here and let me know where did you put the widget is.

Hi!

Unfortunately it is not working. The site is on a localhost.
It’s the first time i’m working on a localhost. Can I share that with you?

I will try to describe where it is;
On the homepage I created a new Row, this Row is divided in two columns.
The first(left) column has a text widget, I was able to center the text when editing this widget in “Design”.
In the right column I have the HTML widget code. The widget looks cramped and I am not able to center it.

Can I share a screenshot here?

Thanks again!

I see.. You can add inline-stylesheet to the widget script in above to make it center. Please modify the first line like this:

<div id="rm_reservation" class="section-content" style="float: none;margin: auto;">
....

Yes! thank you, it is centered now the way I wanted it to!

There is one more thing:

The widget is sort of supposed to look like This
But, on my new website the green button that says “maak een reservering” is slipping behind the “time” (the option to choose a time).

I don’t understand because on both the old and the new website, the same code is used.

I did change the first line like you said (see code below)

<div id="rm_reservation" class="section-content" style="float: none;margin: auto;">
? ?<div class="rm_reservation_top"></div>
? ?<div class="rm_reservation_body">
? ? ? <!--sample style from SeatMe-->
? ? ? <link type="text/css" rel="stylesheet" href="https://www.seatme.nl/css/srm.css">
? ? ? <div id="rm_wrapper">
? ? ? ? ?<!-- this is the script which generates the form -->
? ? ? ? ?<script language="javascript" type="text/javascript" src="https://www.seatme.nl/srm/?rid=6798&af=4211&lang=nl"></script>
? ? ? </div>
? ?</div>
? ?<div class="rm_reservation_bottom"></div>
</div>

Hi there!

I finally have my website online on a test website, maybe someone can take a look now.

It is about the widget on this page:
https://testomgeving.koppeinbeeld.nl/reserveren/

I am not able to design this the way I want to. On the mobile device I experience the same problem.

Thanks in Advance!

Hi,

Your site URL is not accessible.

Link to my website

It should work!

yeah… Its work now.

Please try this CSS code to centering the contents:

#rm_reservation #rm_wrapper .rm_box_wrapper #rm_search_box .rm_box_row .rm_row_title {
    margin: 0 auto;
}
#rm_reservation #rm_wrapper .rm_box_wrapper #rm_search_box .rm_box_row .rm_row_value {
    margin-left: 5px;
}
#rm_reservation #rm_wrapper .rm_box_wrapper #rm_search_box #rm_submit_wrapper {
    margin-top: 20px;
}

The issue was resolved by the help of the provider using this code:

<div id="rm_reservation" class="section-content" style="float: none;margin: auto;">
   <div class="rm_reservation_top">
	</div>
   <div class="rm_reservation_body">
      <!--sample style from SeatMe-->
      <link type="text/css" rel="stylesheet" href="https://www.seatme.nl/css/srm.css">
      <div id="rm_wrapper">
         <!-- this is the script which generates the form -->
         <script language="javascript" type="text/javascript" src="https://www.seatme.nl/srm/?rid=6798&af=4211&lang=nl"></script>
<style>
#rm_reservation .rm_reservation_body {
          width: 239px;
      }
.widget select {
   max-width: 100%;
   height: auto;
}
</style>
      </div>
   </div>
   <div class="rm_reservation_bottom"></div>
</div>