CSS for responsive Form fields (in 2 columns)? | Community
Skip to main content
Sonali_Jadeja3
Sonali_Jadeja3
New Participant
January 25, 2018
Solved

CSS for responsive Form fields (in 2 columns)?

  • January 25, 2018
  • 4 replies
  • 10102 views

Hi,

We're trying to embed a Marketo form on our website. The form will have First name & last name in first row, two columns & email address in second row/one column covering entire width of the page.

Does anyone know the CSS to achieve this? I have the mktoFormrow width set to 100% and mktoFormcol set to 48%.  But that puts email address in second row in first column.

Any inputs will be appreciated!

Best answer by Dave_Roberts

You might need to get creative and use something like the nth-of-type selector to target the third .mktoFormCol to resize it differently than the first two.

That might look something like this:

.mktoFormCol { width: 48% !important;}

.mktoForm .mktoFormRow:nth-of-type(2) .mktoFormCol {

width:100% !important;

}

If you can post a link to a live page with the form loaded up on it, I can use the inspector to help discover a solution that'd work on your form.

You can find more about the nth-of-type selector here: CSS :nth-of-type() Selector

4 replies

Dave_Roberts
Dave_Roberts
New Participant
February 13, 2019

Hey Sonali,

It looks like there is a margin-left: 30%; rule set on the .mktoButtonRow. Im guessing this style is on your template from the looks of it if you're trying to track it down. In the inspector, I was able to add margin:auto !important; to the button row and center the button on mobile. Depending on how you've got your CSS layered, you might also try something like: form.mktoForm .mktoButtonRow {margin-left:auto !important; margin-right:auto !important;}.

It looks like the checkbox labels are lining up to the right of the inputs on my end, not sure if that got fixed or could be browser specific? (Im using Chrome)
I did notice that there was a left-margin that was pushing your inputs in, squeezing those labels a bit. It's more noticeable when the button is centered (see below) so I thought I'd send over a solution to move those over once you get the button centered. In the shot below, I've added a new line of CSS to override the forms2.css file that Marketo loads with your forms. I've pointed out the default w/ the orange sticker and the new code in the yellow box. It move the checkboxes over about "1-checkbox width" to the left and they line up a bit nice with the left side of the button this way.

Here's that code for reference:

.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label {

margin-left: 0 !important;

}

Casey_Grimes2
Casey_Grimes2
New Participant
January 26, 2018

Hi Sonali,

https://gist.github.com/cougrimes/5168524fd9365eedea16 supports up to three columns being normalized out for responsive using nth-last-child rather than nth-of-type, which can cause some issues otherwise.

    Nav_Singh1
    Nav_Singh1
    New Participant
    February 11, 2019

    @courtney-3 I was trying out your suggestion on my test page here. I'm running into some issues aligning the checkboxes to the right of the label and centering the button on mobile. Should the margin:auto !important; line work here or did I miss something?

    Dave_Roberts
    Dave_RobertsAccepted solution
    New Participant
    January 26, 2018

    You might need to get creative and use something like the nth-of-type selector to target the third .mktoFormCol to resize it differently than the first two.

    That might look something like this:

    .mktoFormCol { width: 48% !important;}

    .mktoForm .mktoFormRow:nth-of-type(2) .mktoFormCol {

    width:100% !important;

    }

    If you can post a link to a live page with the form loaded up on it, I can use the inspector to help discover a solution that'd work on your form.

    You can find more about the nth-of-type selector here: CSS :nth-of-type() Selector

      Sonali_Jadeja3
      Sonali_Jadeja3Author
      New Participant
      February 2, 2018

      This worked! Thank a lot @Dave Roberts​

      And thanks everyone for taking time to answer my query!

      SanfordWhiteman
      SanfordWhiteman
      New Participant
      January 26, 2018

      What are your breakpoints? A 2 column layout with span isn't necessarily "responsive."

      Terms & ConditionsAccessibility statement

      Loading footer...