Registration form label is not full width

-- 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

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:

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:

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

Hi Nicolas,

I removed the old code and place your new one. The length of most label and field looks good, except for the password field and dropdown fields:



How can I change this?

Regards,

Wella

Hi,

The text inputs on your registration form have a `width: 400px` set by the template, but the password inputs and select dropdowns don't have that same constraint. That's why they stretch to full width.

Add this CSS to fix them:

Hi Nicolas,

Almost there , the dropdown fileds looks a lot better but the password parts still show this:


Captcha text:

Hi,

The password fields are rendered by Joomla using a wrapper div with the class "password-group", which contains the input, the show/hide toggle button, and the strength meter bar. Your current CSS targets the input directly, but the wrapper is what needs to be constrained.

Add:
This will constrain the entire password component including the toggle button and the strength meter bar.

For the "Fields marked with an asterisk (*) are required." text appearing too narrow, you can try adding:

Hi Nicolas,

The show/hide toggle button and the strength meter bar are looking good but the captcha part has no influence.

Hi,

Try like this instead:

Hi Nicolas,

Yes....This code works! :woohoo:

Thank you so much for your help and constant support.

Regards,

Wella