Mobile view - problem with orientation

following problem. https://hebammenhaus-agatharied.de/#anmeldungkurs

in the mobile phone view, everything is displayed correctly in landscape format, but parts of the registration are cut off in portrait format.
Please solve the problem. It would be best to have a note that shows the portrait format - please turn your mobile phone. (like a popup)

Hi Uli,

Thanks for reaching out.
I have investigated it and found that the title contains   and that is why it has been treated as a single string without any space and that is why it didn’t break

Screenshot-2022-10-06-161515

I would suggest you go through the following thread on a similar topic.

Hope it helps.
Thanks

Thanks in advance. I have little idea about it - can you tell me /or do it - what to do exactly. Alternatively, I would have a modal window for the mobile phone view (if it is upright) - in which it says please turn to landscape format). Thanks for your help. I’m really at a loss

Hello Uli,

You will have to edit the page and manually remove the   characters from the HTML Table code and replace it with an empty space which you have inserted in the Accordion element content item.

<table class="portal-Table">
  <thead>
    <tr>
      <th>Termin</th>
      <th>Uhrzeit</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>18.10.2022&nbsp;-&nbsp;06.12.2022</td>
      <td>17:00</td>
      <td>freie Plätze:&nbsp;keine</td>
      <td></td>
    </tr>
    <tr>
      <td>14.11.2022&nbsp;-&nbsp;23.12.2022</td>
      <td>19:00</td>
      <td>freie Plätze:&nbsp;4</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=511a4000406f10308fde00000101000a&amp;termin=14.11.2022">Anmeldung</a></td>
    </tr>
    <tr>
      <td>01.12.2022&nbsp;-&nbsp;12.01.2023</td>
      <td>19:15</td>
      <td>freie Plätze:&nbsp;5</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=bc9fc000425f1030ac7200000101000a&amp;termin=01.12.2022">Anmeldung</a></td>
    </tr>
    <tr>
      <td>13.12.2022&nbsp;-&nbsp;24.01.2023</td>
      <td>17:00</td>
      <td>freie Plätze:&nbsp;7</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=d75fe0005f991030b4e600000101000a&amp;termin=13.12.2022">Anmeldung</a></td>
    </tr>
    <tr>
      <td>05.01.2023&nbsp;-&nbsp;16.02.2023</td>
      <td>16:30</td>
      <td>freie Plätze:&nbsp;7</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=d01d8000651e103087a700000101000a&amp;termin=05.01.2023">Anmeldung</a></td>
    </tr>
    <tr>
      <td>16.01.2023&nbsp;-&nbsp;27.02.2023</td>
      <td>19:00</td>
      <td>freie Plätze:&nbsp;6</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=cfa9a00062f3103087a700000101000a&amp;termin=16.01.2023">Anmeldung</a></td>
    </tr>
    <tr>
      <td>25.01.2023&nbsp;-&nbsp;08.03.2023</td>
      <td>17:30</td>
      <td>freie Plätze:&nbsp;8</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=7b37600062dc103087a700000101000a&amp;termin=25.01.2023">Anmeldung</a></td>
    </tr>
    <tr>
      <td>14.02.2023&nbsp;-&nbsp;28.03.2023</td>
      <td>17:00</td>
      <td>freie Plätze:&nbsp;10</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=d797e00073da1030aaa200000101000a&amp;termin=14.02.2023">Anmeldung</a></td>
    </tr>
    <tr>
      <td>12.04.2023&nbsp;-&nbsp;24.05.2023</td>
      <td>17:30</td>
      <td>freie Plätze:&nbsp;10</td>
      <td><a class="miya" href="kursanmeldung?kursbezeichnung=Geburtsvorbereitung&amp;id=9d53000077231030aaa200000101000a&amp;termin=12.04.2023">Anmeldung</a></td>
    </tr>
  </tbody>
</table>

Please be aware that HTML table does not collapse when the space is too narrow. It will always be cut off. To prevent this from happening, adding this nifty little CSS in the page’s CSS section or in Cornerstone > Theme Options > CSS will allow the viewer to scroll to the right of the screen to display the rest of the table:

.x-acc .x-acc-content {
    overflow-x: scroll;
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Hope this makes sense.

thank you very much it worked well so far. now I only have 1 thing left. as soon as you click on “Registration” (in the mobile phone view) e.g. at https://hebammenhaus-agatharied.de/kursanmeldung? course designation=birth preparation&id=511a4000406f10308fde00000101000a&termin=14.11.2022

then the page is cut off again in mobile phone upright mode, what can I do? that there e.g. scrollbars appear or is the display responsive? thank you very much and have a nice sunday!

Hello Uli,

Can you please disable your WP Debug mode first so we can get rid of these PHP Notices:
Notice: Trying to access array offset on value of type null in /mnt/web109/a0/59/59521059/htdocs/WordPress_SecureMode_02/wp-content/themes/pro-child/kursanmeldung.php on line 79 Notice: Trying to access array offset on value of type null in /mnt/web109/a0/59/59521059/htdocs/WordPress_SecureMode_02/wp-content/themes/pro-child/kursanmeldung.php on line 79

Be advised that HTML Tables are not responsive. A scrollbar might be possible in the Container of the HTML Table, still, it may not work every time. You will need to find other ways to present those values in a different way. Please use a form builder like Gravity Forms plugin or any other related plugin so that you can easily have a responsive form added into the page.

Best Regards.

use this link please:
https://hebammenhaus-agatharied.de/kursanmeldung/?kursbezeichnung=Geburtsvorbereitung&id=9d53000077231030aaa200000101000a&termin=12.04.2023

thank you for troubleshooting :wink:

You are most welcome Uli.

thank you very much it worked well so far. now I only have 1 thing left. as soon as you click on “Registration” (in the mobile phone view) e.g. at https://hebammenhaus-agatharied.de/kursanmeldung/?kursbezeichnung=Geburtsvorbereitung&id=9d53000077231030aaa200000101000a&termin=12.04.2023

then the page is cut off again in mobile phone upright mode, what can I do? that there e.g. scrollbars appear or is the display responsive? thank you very much and have a nice sunday!

Hello Uli,

A broken HTML code has been inserted to the page which have messed up the whole page layout. This is why the footer is misplaced. I would love to check the page and see how the form has been inserted into the page. Please provide us access to your site. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

okay, ill send you a secure note with the details

Hi Uli,

There might be some restrictions on IPs to access the WordPress admin dashboard, please remove the IP restriction and let us know to examine it further. Please note that we are from different parts of the World and most of us have a dynamic IP so we can’t provide a specific ID address to you for whitelisting.

Thanks

now I only have 1 thing left. as soon as you click on “Registration” (in the mobile phone view) e.g. at https://hebammenhaus-agatharied.de/kursanmeldung/?kursbezeichnung=Geburtsvorbereitung&id=9d53000077231030aaa200000101000a&termin=12.04.2023

then the page is cut off again in mobile phone upright mode, what can I do? that there e.g. scrollbars appear or is the display responsive? thank you very much and have a nice sunday!

Hello Uli,

We have responded your other thread regarding the same issue.

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.