Text falls of the page

  • Posts: 12
  • Thank you received: 1
5 days 9 hours ago #372722

-- HikaShop version -- : 5.4.7
-- Joomla version -- : 6.3.0

Hi,

prnt.sc/4qJJak9hBai3

As you can see in the photo above, the text is falling off the page. How can I adjust the text so that it doesn't become too small, but still fits on the page?

Thanks in advance!

Please Log in or Create an account to join the conversation.

  • Posts: 85952
  • Thank you received: 14140
  • MODERATOR
4 days 20 hours ago #372723

Hi,

This is linked to your template and how your shop is configured. It's impossible to say anything without directly looking at the problem.
Can you provide the URL of the page ?

Please Log in or Create an account to join the conversation.

  • Posts: 12
  • Thank you received: 1
4 days 10 hours ago #372746

Hi Nicolas,

Thank you for responding.
jouwnaambord.demodotcom.nl
This is our website in development.

jouwnaambord.demodotcom.nl/naambord-plex...et-foto-van-huisdier
This is for example a product in our webshop.

Please Log in or Create an account to join the conversation.

  • Posts: 85952
  • Thank you received: 14140
  • MODERATOR
3 days 21 hours ago #372752

Hi,

That block is the product custom fields table, and the overflow is a CSS layout issue: the table (and its inputs/help texts) is wider than the column it sits in, so instead of wrapping it spills past the right edge and gets cut off. It is not a HikaShop setting, so the fix is a small CSS rule. It keeps the text at its normal size and simply makes it wrap and fit the available width.

Add this to your template custom CSS (often a user.css file, or a "Custom CSS" field in the template options):

.hikashop_product_custom_info_main_table {
    width: 100%;
    table-layout: fixed;
}
.hikashop_product_custom_info_main_table td {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}
.hikashop_product_custom_info_main_table td.key {
    width: 40%;
}
.hikashop_product_custom_info_main_table input,
.hikashop_product_custom_info_main_table select,
.hikashop_product_custom_info_main_table textarea {
    max-width: 100%;
    box-sizing: border-box;
}

Adjust the 40% if you want the label column narrower or wider. If the inspector shows a different container for your layout (for instance if you use the tabular product layout), right-click the overflowing text, choose Inspect, and use the class shown there instead of hikashop_product_custom_info_main_table.

Please Log in or Create an account to join the conversation.

Time to create page: 0.061 seconds
Powered by Kunena Forum