Search code examples
htmlcssmobileresponsive-designskeleton-css-boilerplate

Skeleton CSS - responsive form

I have a form implemented using skeleton css. I was using a three column (i.e. one-third columns) layout but this resulted in a lot of white space because of the respective lengths of the columns content. I would prefer a horizontal layout similar to the following:

Textbox1 Textbox2 Textbox3

Textbox4 Textbox5 Textbox6

Which then collapses for mobile as so:

Textbox1

Textbox2

Textbox3

Textbox4

Textbox5

Textbox6

The only way I have thought I can do this so far is to wrap each textbox in it's own 'one-third' column. Is there a cleaner way of doing this?

Thanks

Solution

  • Set class to your text boxes (or input[type="text"]) and CSS:

    For desktop:

    .yourclass {
    width: 33%;
    float: left;
 }

    For mobile:

    @media only screen and (max-device-width: 480px) {
    .yourclass {
         width: 100%;
         float: left;
    }
}

    This: https://mislav.net/2010/04/targeted-css/ may be helpful.