Bone Structure Styles - adaptable form

Question

Bone Structure Styles - adaptable form

I'm currently working on a form using skeleton css and initially set it up with a three-column layout. However, I found that this created too much white space due to varying content lengths in each column. I would like to switch to a horizontal layout similar to the one shown below:

Textbox1 Textbox2 Textbox3

Textbox4 Textbox5 Textbox6

For mobile, I want the layout to collapse like this:

Textbox1

Textbox2

Textbox3

Textbox4

Textbox5

Textbox6

Currently, my solution involves wrapping each textbox in its own 'one-third' column. I'm wondering if there is a cleaner way to achieve this layout?

Thank you

html css mobile responsive-design skeleton-css-boilerplate

Answer 1

Answer №1

To style your text boxes (or input[type="text"]), add a custom class and apply CSS:

For larger screens:

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

For smaller screens:

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

This resource on targeted CSS might come in handy: .

Answer 2

To style your text boxes (or input[type="text"]), add a custom class and apply CSS:

For larger screens:

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

For smaller screens:

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

This resource on targeted CSS might come in handy: .

Bone Structure Styles - adaptable form

Answer №1

Similar questions

Leverage XMPP with the power of HTML5

Guiding user to their destination after signing in

Ways to specify the encoding for a text iframe embedded in a webpage

How can I activate the fancy box from a specific div element?

Using the clip-path property to determine the content padding within a div

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

What is the best way to make ng-style append to a pre-existing style?

Optimizing the position of the datepicker dropdown in Boostrap 4

Storing External Cached Data

Resizing an image based on the coordinates of a click position by utilizing jQuery

Easily done! Using JavaScript to generate a blinking cursor on a table

Creating a Timeout Function for Mobile Browsers in JavaScript/PHP

Align the center of a grid div that does not contain any items

What is the best way to apply padding to the top of a div when it is positioned below another div?

Utilizing LocalStorage in conjunction with the redux state management

What is the best way to position a div as a footer within a larger main div?

Prioritize loading the JS function before initiating PHP validation

Step-by-step guide to creating a pop-up div that appears on hover and remains visible when clicked

Strategies for Increasing Index Values in JavaScript