Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 29, 2022 at 11:42 am #1374245
    HolgerRaddatz

    Dear Support Team,

    on the website doula.anna-raddatz.de I use tables under the menu item “Prices”. With certain screen resolutions, the text does not fit in the table.
    When reducing the screen resolution, at a certain point the view changes on fields displayed below each other, which were previously displayed next to each other. Shortly before this change, when the fields are still displayed side by side, the error is visible.
    Unfortunately, it has the effect that, for example, with an iPad in portrait format and with an iPhone (14 Pro Max) in landscape format, the table looks wrong from the start.
    What can I do of fix this Problem?
    Thank you for the support.

    November 29, 2022 at 2:23 pm #1374280
    Mike

    Hey HolgerRaddatz,
    Thanks for the link to your site, you can use this css to brake the words so they stay in the cells, please note that not all browsers will show the hyphens, Chrome on Windows doesn’t but the words are still broken.

    #top .avia-table.avia-pricing-table-container li {
	 -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

    Another option is to reduce the font size for the tablet screen, but your long words still need to be broken, but this might look better:

    @media only screen and (min-width: 768px) and (max-width: 1415px) { 
#top .avia-table.avia-pricing-table-container li {
 font-size: 12px;
 -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

    So try different font sizes to find a balance that you like.

    Best regards,
    Mike

    December 3, 2022 at 11:10 am #1374883
    HolgerRaddatz

    Hi Mike,
    thank you very much for your reply.
    I tried to adjust it the way you wrote me, but I obviously did not understand where to put the css.
    Could you please tell me, how to implement the css?
    Thank you!
    Best regards, Holger

    December 3, 2022 at 1:10 pm #1374895
    Mike

    Hi,
    I’m sorry for not explaining it better, try adding the css in the Enfold Theme Options ▸ General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field.

    Best regards,
    Mike

    December 12, 2022 at 9:07 pm #1375994
    HolgerRaddatz

    Herzlichen Dank,
    das scheint zu funktionieren.
    Danke :-)

    December 13, 2022 at 1:53 am #1376014
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Text extends beyond the edge of tables’ is closed to new replies.