Field alignment on mobile and html table issue

Hi there,

1.) I have created a html block with a table where I set the inner margin to 5px. While it shows correctly in editing mode, the margin seems to be applied only on the first column in the preview/ live view:

2.) The alignment of the input fields looks very messy in the mobile preview (it's the same on my phone). Not sure what I can do about it. Please take a look:

Kind regards,

Tobias.

Greetings and thank you for your message.

1) Can you please use padding for every inline element instead of using cellpadding for the whole table? Cellpadding is not supported in HTML 5, and the reason why it's not implemented in your code might be just there. 

You can add the following line of code:

padding: 5px;

inside your table next to an existing inline style for every cell, so it looks like this:

style="width: 493px; height: 17px; padding: 15px;"

2) To align the fields that come in pair, you can add the followind CSS:

@media (max-width:500px) { 
  [data-type="control_fullname"] .form-sub-label-container {
    width: 100% !important;
  }
  [data-type="control_fullname"] .form-label + div .form-sub-label-container {
    padding-right: 0;
  }
  [data-type="control_fullname"] .form-label + div .form-sub-label-container + .form-sub-label-container {
    padding-left: 0;
  }
}

Please read this article to see how to inject custom CSS.

Please let us know if this solution helps you. If not, please let us know what exactly would you like to change.