How to left aligned the description in Card layout for mobile view?

  • Aida Nadhirah Ahmad Shukri
    Asked on February 9, 2024 at 9:51 AM

    How to left aligned the description in Card layout for mobile view?

    Page URL: https://www.jotform.com/help/493-how-to-change-the-form-layout/
  • Jefferson JotForm Support
    Replied on February 9, 2024 at 10:10 AM

    Hi Aida,

    Thanks for reaching out to Jotform Support. I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

  • Jefferson JotForm Support
    Replied on February 9, 2024 at 10:45 AM

    Hi Aida,

    Thanks for reaching out to Jotform Support. If I understand your concern correctly, you would like to left-align the fields in mobile view. Yes, you can do that by injecting custom CSS code into your form. Let me show you how:

    1. Open your Form Builder and go to Build.

    2. Click on the Paint Roller icon.How to left aligned the description in Card layout for mobile view? Image 1 Screenshot 40

    3. Under the Form Designer, go to Styles tab.How to left aligned the description in Card layout for mobile view? Image 2 Screenshot 51

    4. Scroll down a little bit until you see the Inject Custom CSS area.How to left aligned the description in Card layout for mobile view? Image 3 Screenshot 62

    Copy the following CSS code inside the Inject Custom CSS area:

    .form-all {
    
  width : 100% !important;
    
}
    
@media screen and (max-width: 480px){
    
  .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown {
    
    max-width : 100% !important;
    
    width : auto !important;
    
  }
    

    
  label + div {
    
    float : right !important;
    
  }
    
}


    That's it! Test your form and see if it left-align the fields in your form.

    You can also check out this guide on How to Inject Custom CSS Codes.

    Give it a try and let us know how it goes.