[SOLVED] Skeleton CSS - responsive form

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.