Skeleton CSS - responsive form

Question

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

score 2 · Accepted Answer · edited Nov 13 '20 at 10:09

2

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.

edited Nov 13 '20 at 10:09

Dave Powers

2,051
2
30
34

answered Apr 19 '13 at 09:17

Lemur

2,659
4
26
41

Ok and do this within a sixteen column I presume? – ajguk Apr 19 '13 at 09:17
You may use child selector, too - if your textboxes are in `.somediv`, you may use `.somediv > input` – Lemur Apr 19 '13 at 09:19
width 33% then carries over though so they don't stack for a mobile screen - would media queries be needed for this to set a width of 100%? – ajguk Apr 19 '13 at 09:21
I edited the comment, I've forgotten to copypaste everything, sorry – Lemur Apr 19 '13 at 09:25
Thanks - I'll do it with media queries. I was just hoping to do it through classes but media queries will suffice. Thanks – ajguk Apr 19 '13 at 09:38

Skeleton CSS - responsive form

1 Answers1