Responsive HTML CSS Div with Bootstrap styling

Question

Responsive HTML CSS Div with Bootstrap styling

Currently, I have some div elements that display nicely on desktop and tablet devices. However, the issue arises when the view is switched to mobile, as the elements appear disorganized and do not adjust appropriately.

My goal is to have these elements automatically adjust their layout: showing 3 in a line on a tablet and 2 in a row on a mobile device, similar to the desired outcome shown here:

Mobile View Example

I believe using the col-xs-6 class in Bootstrap should achieve this responsive layout, but adding it doesn't seem to have the desired effect.

Below is the HTML code:

<div id="surveys" class="surveys col-xs-12"><div>
    /* HTML code continues */

And the corresponding CSS:

#surveys h4 {
    /* CSS code for h4 element */
}

/* Additional CSS styles */

Any suggestions on how to make these elements shift responsively would be greatly appreciated. Thank you!

EDIT - Including the updated HTML with row and col-xs-6 classes, along with the resulting output:

<div id="surveys" class="surveys col-xs-12">
    /* Updated HTML code */

View on Laptop (padding seems to be added outside the divs): Laptop View

View on Mobile (appears more scrunched up): Mobile View

EDIT - The issue may be in the CSS snippet below, as it seems to disrupt the functionality when re-added:

#surveys .survey-item {
    /* Problematic CSS */
}

jquery html css twitter-bootstrap

Answer 1

Answer №1

The custom CSS code contains various elements that are causing issues, particularly those related to setting the width and margins of each item. It is recommended to allow each item to fill the designated col-* space.

#surveys .survey-item {
    display: block;
    margin: 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

An additional recommendation is to streamline the HTML structure, as there are numerous nested levels. Ensure that col elements are always the direct child of the `row`.

For a visual reference, you can visit this link

Answer 2

The custom CSS code contains various elements that are causing issues, particularly those related to setting the width and margins of each item. It is recommended to allow each item to fill the designated col-* space.

#surveys .survey-item {
    display: block;
    margin: 5px 0;
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

An additional recommendation is to streamline the HTML structure, as there are numerous nested levels. Ensure that col elements are always the direct child of the `row`.

For a visual reference, you can visit this link

Answer 3

Answer №2

Ensure that your column classes are applied to the survey-item elements. Trying to fit 5 columns within a "desktop" view using Bootstrap's 12 column layout may result in unwanted white space (it must be an even number).

For example:

<div class="survey-item col-md-3 col-xs-6">
    <div id="2697033" class="item survey">
        ...
    </div>
</div>

Don't forget to include the row class in your surveys-list-container element. The final structure should resemble the following:

<div id="surveys-list-container" class="row">
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
</div>

Note: The way Bootstrap columns function is based on dividing 12 by the number in the column class. For instance, col-md-3 would yield 4 columns (12/3 = 4). For 6 columns, the class would have to be col-md-2 (12/2 = 6).

Regarding your CSS for survey-item, it is recommended to adjust it as follows:

#surveys .survey-item {
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

Remember, Bootstrap columns handle floating and width automatically. It's best practice to apply padding and margins to a child element within your survey-item element.

Answer 4

Ensure that your column classes are applied to the survey-item elements. Trying to fit 5 columns within a "desktop" view using Bootstrap's 12 column layout may result in unwanted white space (it must be an even number).

For example:

<div class="survey-item col-md-3 col-xs-6">
    <div id="2697033" class="item survey">
        ...
    </div>
</div>

Don't forget to include the row class in your surveys-list-container element. The final structure should resemble the following:

<div id="surveys-list-container" class="row">
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
    <div class="survey-item col-md-3 col-xs-6">
        ...
    </div>
</div>

Note: The way Bootstrap columns function is based on dividing 12 by the number in the column class. For instance, col-md-3 would yield 4 columns (12/3 = 4). For 6 columns, the class would have to be col-md-2 (12/2 = 6).

Regarding your CSS for survey-item, it is recommended to adjust it as follows:

#surveys .survey-item {
    border-radius: 7px 7px 6px 6px;
    border-width: 1px;
    border-style: solid;
    position: relative;
    cursor: pointer;
    background-color: #FFFFFF;
    border-color: #dddddd;
    -moz-box-shadow: 0 2px 0 0 #cccccc;
    -webkit-box-shadow: 0 2px 0 0 #cccccc;
    box-shadow: 0 2px 0 0 #cccccc;
}

Remember, Bootstrap columns handle floating and width automatically. It's best practice to apply padding and margins to a child element within your survey-item element.

Answer 5

Answer №3

Upon investigation, it appears that the following code snippets were disrupting the expected behavior of the bootstrap framework:

#surveys .survey-item {
    width: 19.2%;
    margin: 5px 0.8% 5px 0;
}

By removing these lines of code, the standard responsive grid system of bootstrap was restored.

Answer 6

Upon investigation, it appears that the following code snippets were disrupting the expected behavior of the bootstrap framework:

#surveys .survey-item {
    width: 19.2%;
    margin: 5px 0.8% 5px 0;
}

By removing these lines of code, the standard responsive grid system of bootstrap was restored.

Responsive HTML CSS Div with Bootstrap styling

Answer №1

Answer №2

Answer №3

Similar questions

Using Jquery toggle to keep divs always open or automatically open them at the start

Incorporate a variable into a CSS class

Converting SVG circle animation into textual form - a step-by-step guide!

Differentiating onClick events for parent and child elements

Refreshing the page when the button is clicked to upload files using AJAX

What is the method for applying a class to another element?

Combining Data from Header to Body using HTML5 and JavaScript

Tips on changing the outline color by clicking

How can we integrate this icon/font plugin in CSS/JavaScript?

Incorporating dynamic content changes for enhanced user experience can be achieved more effectively with AngularJS

Error: Morris.js is unable to access the property 'x' because it is undefined

Prettyprint XML in Angular 8+ without using any external libraries

Ways to conceal the contents of a page behind a transparent background div while scrolling

Escaping HTML code within a Mustache template is crucial to prevent

How come the dark grey in CSS appears to be lighter than the standard grey hue?

Leveraging Javascript within MVC3, either on a master page or child page

jQuery DatePicker Not Displaying Calendar

What can I do to improve the quality of the resolution?

Enhancing the appearance of multiple images with CSS and Bootstrap styling

Non-functioning Tooltips on Google Charts