Field alignment on mobile and html table issue

  • Profile Image
    castlekb
    Asked on February 18, 2020 at 11:11 AM

    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:

    1582042056screenshot.1.jpg

    1582042071screenshot.2.jpg


    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:

    1582042225screenshot.3.jpg

    1582042244screenshot.4.jpg


    Kind regards,

    Tobias.

  • Profile Image
    Bojan_J
    Answered on February 18, 2020 at 02:03 PM

    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.