Form Customization - Help moving required asterisks in mobile | Community
Skip to main content
kagill16
kagill16
New Participant
August 9, 2018
Solved

Form Customization - Help moving required asterisks in mobile

  • August 9, 2018
  • 1 reply
  • 2426 views

Hello -

Having some difficulty moving the required asterisks in mobile to the left of the fields. I would like the asterisk to be positioned to the left of the input fields, however, it keeps moving above. I am sure it is a CSS issue, but I have been working on it now for too long and decided to reach out to the community for help! The page can be found here: mk.expedia.com/cutest.html

Let me know if anyone has ideas! Thanks,

- Karl

Best answer by kagill16

Jim! I was able to fix it on my end but here's what I ended with:

}

@media only screen and (max-width: 480px) {

.mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix {

margin-bottom: -27px !important; }

.mktoForm .mktoFormRow .mktoFormCol {

width: 350px !important;

}

.mktoForm .mktoFormCol .mktoLabel {

line-height: 2.0em !important;

}

}

Let me know if you have any other ideas though!

1 reply

Jim_Thao7
Jim_Thao7
New Participant
August 9, 2018

Hey Karl.  They look left aligned to me when I resize to mobile.  Can you post a screenshot of what you're seeing?

    kagill16
    kagill16AuthorAccepted solution
    New Participant
    August 9, 2018

    Jim! I was able to fix it on my end but here's what I ended with:

    }

    @media only screen and (max-width: 480px) {

    .mktoForm .mktoFormRow .mktoRequiredField .mktoAsterix {

    margin-bottom: -27px !important; }

    .mktoForm .mktoFormRow .mktoFormCol {

    width: 350px !important;

    }

    .mktoForm .mktoFormCol .mktoLabel {

    line-height: 2.0em !important;

    }

    }

    Let me know if you have any other ideas though!

      Terms & ConditionsAccessibility statement

      Loading footer...