[Skip to main content](#vessel-content) # Registration form label is not full width ## - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 7 months 5 days ago - 7 months 5 days ago [\#371370](#371370) by [Wella](/forum/user/33127-wella "View Wella's Profile") *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#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 { --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")* was created by *[Wella](/forum/user/33127-wella "View Wella's Profile")* -- 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). [ ![Registration form.jpg](/forum/attachment/63072) ](/forum/attachment/63072 "...ation form.jpg") 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 - [ ![Registration form.jpg](/forum/attachment/63072) ](/forum/attachment/63072 "...ation form.jpg") [ ](/forum/attachment/63072?download=1 "...ation form.jpg") Last edit: 7 months 5 days ago by [Wella](/forum/user/33127-wella "View Wella's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 7 months 5 days ago [\#371371](#371371) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371371 "-- 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 { --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: Code: .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: Code: .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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 6 months 4 weeks ago - 6 months 4 weeks ago [\#371440](#371440) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371440 "-- 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 { --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 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: [ ![Registration form field too long.jpg](/forum/attachment/63075) ](/forum/attachment/63075 "...d too long.jpg") How can I change this? Regards, Wella - [ ![Registration form field too long.jpg](/forum/attachment/63075) ](/forum/attachment/63075 "...d too long.jpg") [ ](/forum/attachment/63075?download=1 "...d too long.jpg") Last edit: 6 months 4 weeks ago by [Wella](/forum/user/33127-wella "View Wella's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 6 months 4 weeks ago [\#371441](#371441) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371441 "-- 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 { --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, 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: Code: .hkform-horizontal input[type="password"], .hkform-horizontal select.form-select { max-width: 400px; } Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 6 months 4 weeks ago - 6 months 4 weeks ago [\#371451](#371451) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371451 "-- 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 { --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 Nicolas, Almost there ![:)](/media/kunena/emoticons/3.png ":)") , the dropdown fileds looks a lot better but the password parts still show this: [ ![Registration form.jpg](/forum/attachment/63076) ](/forum/attachment/63076 "...ation form.jpg") Captcha text: [ ![Captcha.jpg](/forum/attachment/63077) ](/forum/attachment/63077 "Captcha.jpg") - [ ![Registration form.jpg](/forum/attachment/63076) ](/forum/attachment/63076 "...ation form.jpg") [ ](/forum/attachment/63076?download=1 "...ation form.jpg") - [ ![Captcha.jpg](/forum/attachment/63077) ](/forum/attachment/63077 "Captcha.jpg") [ ](/forum/attachment/63077?download=1 "Captcha.jpg") Last edit: 6 months 4 weeks ago by [Wella](/forum/user/33127-wella "View Wella's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 6 months 4 weeks ago - 6 months 4 weeks ago [\#371453](#371453) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371453 "-- 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 { --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, 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: Code: .hkform-horizontal .password-group { max-width: 400px; } 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: Code: .hikashop_registration_required_info_line .hkc-sm-8 { max-width: none; } Last edit: 6 months 4 weeks ago by [nicolas](/forum/user/63-nicolas "View nicolas's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 6 months 4 weeks ago [\#371458](#371458) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371458 "-- 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 { --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 Nicolas, The show/hide toggle button and the strength meter bar are looking good but the captcha part has no influence. [ ![Under_Captcha.jpg](/forum/attachment/63078) ](/forum/attachment/63078 "Under_Captcha.jpg") - [ ![Under_Captcha.jpg](/forum/attachment/63078) ](/forum/attachment/63078 "Under_Captcha.jpg") [ ](/forum/attachment/63078?download=1 "Under_Captcha.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 6 months 4 weeks ago [\#371461](#371461) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371461 "-- 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 { --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, Try like this instead: Code: .hikashop_registration_required_info_line { display: block !important; } The following user(s) said Thank You: [Wella](/forum/user/33127-wella "View Wella's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 6 months 3 weeks ago [\#371482](#371482) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Registration form label is not full width](/forum/26-product-category-display/910423-registration-form-label-is-not-full-width#371482 "-- 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 { --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 Nicolas, Yes....This code works! :woohoo: Thank you so much for your help and constant support. Regards, Wella The following user(s) said Thank You: [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS85MTA0MjMtcmVnaXN0cmF0aW9uLWZvcm0tbGFiZWwtaXMtbm90LWZ1bGwtd2lkdGg/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.108 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)