Registration form label is not full width

  • Posts: 69
  • Thank you received: 8
4 hours 11 minutes ago #371370

-- HikaShop version -- : 6.3.0
-- Joomla version -- : 5.4.3
-- PHP version -- : 8.3.13

Hi,

I’ve noticed that the registration label is displayed half in width (see screenshot).



I have tried to search it (firebug) I can only influence it when the code below is off (highlighted). My problem is:
1. If this is the good method to change
2. If yes, where can I change it?

@media (min-width: 768px) {
.hkc-sm-4 {
grid-column: span 4;
--hk-span: 4;
}

Can someone please help me with this problem? What we like to have is Text goes to the left and displayed in 1 line (full width).

Regards,

Wella

Attachments:
Last edit: 4 hours 7 minutes ago by Wella.

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

  • Posts: 85392
  • Thank you received: 13955
  • MODERATOR
40 minutes ago #371371

Hi,

I've checked your website and the issue comes from a CSS rule in your custom CSS file (`frontend_custom.css`) that limits the form width:

.hkform-horizontal {
    max-width: 450px;
}

This constrains the registration form to 450px, which makes the labels (at 4/12 of that width = ~150px) too narrow for some Dutch labels like "E-mail bevestiging" or "Wachtwoord bevestigen" which then wrap to two lines.

You have two options:

1. Remove or increase the `max-width` on `.hkform-horizontal` in your custom CSS. For example, `max-width: 700px` or remove it entirely.

2. If you want to keep the narrow form but have labels on their own line above the inputs, add this CSS:
.hikashop_contentpane .hkform-group .hkcontrol-label.hkc-sm-4 {
    grid-column: span 12;
    text-align: left;
}
.hikashop_contentpane .hkform-group .hkc-sm-8 {
    grid-column: span 12;
}

You can edit the custom CSS from the HikaShop backend via Display > Configuration > Custom CSS file.

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

Time to create page: 0.279 seconds
Powered by Kunena Forum