Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness.
Here are some examples:
I have tried using floats, inline-block display, and even attempted to piece it together with jQuery, but all the elements end up being organized horizontally.
After searching around, I have not been able to find others facing the same issue or solutions, so any help would be greatly appreciated.
If you're not too worried about compatibility across different browsers (and just want to enhance the appearance in modern browsers), or if you're willing to use a JavaScript shim to add support for other browsers, you can utilize column-width to set the width of columns and let the browser adjust them to fit the content:
.gridbox {
display: block;
-webkit-column-width: 4em;
-moz-column-width: 4em;
-o-column-width: 4em;
-ms-column-width: 4em;
column-width: 4em;
/* custom styling goes here,
only the column-width is necessary */
margin: 1em auto;
padding: 1em;
border: 1px solid #f90;
border-radius: 1em;
}
In the demo, I used li and ul elements, but this approach can be applied to div elements as well. Just style the parent/container like the ul element above, and customize the child elements according to your preferences.
Want more information? Check out these references:
If you want to restructure your HTML, you'll need to create sub-containers within your main container to organize your content. Here's an example:
// Example 1
<div id="main">
<div class="group2">
<span>1</span>
<span>2</span>
</div>
...
</div>
// Example 2
<div id="main">
<div class="group3">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
...
</div>
To achieve the desired effect, you can use CSS to limit the width of the group containers.
Is it possible to prevent CSS properties like text-transform from affecting text entered via contenteditable? On my webpage, "CERTIFICATE PROGRAM" is shown in uppercase due to text-transform settings. However, the original input was: Certificate Program. ...
Is there a way to use $location.path for redirection in angularjs? I have the configuration below: ngModule.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { $urlRouterProvider. ...
Having trouble with my fetch request taking too long and then failing I've tested it on Chrome, Edge, and Postman without success All other fetch requests from the Pixabay API are working perfectly fine I compared my code to previous projects I&apo ...
As I dive into testing Material-UI components, one thing has me puzzled. Take the List component for example - why use such syntax? <List component="nav"> <ListItem button selected={selectedIndex === 0} onClick={(event) => ha ...
I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...
Next is my deluxe slider code. This slider displays only images but I am looking to incorporate video as well. I have searched online and tried different solutions, but haven't found one that works for me. Can someone please guide me on how to achieve ...
I have encountered an issue while using a dropdown inside a modal window. The problem is that not all the dropdown values are visible, as the overflow part gets hidden. I am looking for a solution to keep the dropdown value at the top and prevent it from b ...
I've created some gulp tasks to assist in building my web project. One of the tasks involves minifying js files. Here is the task code snippet: gulp.task('minify' , function() { console.log('Copy minified js '); return gulp ...
Recently, while working on a program using npm script on my Mac system, I encountered some issues. Despite having installed node-sass globally, running "npm run build:css" did not work as expected. The content of my package.json file can be viewed here. Th ...
I have a JavaScript file with two methods: var DBProcessing = function() { console.log("ok") ... } var DBProcessing = function(str) { console.log(str); ... } When calling DBProcessing(), I am only getting an output of undefined. Is there a way to expli ...
I need help with a form that has 6 input fields. I want to ensure all fields are filled out, and if not, display an alert message. Any suggestions on how to achieve this? Additionally, I'm experiencing difficulties implementing different font styles. ...
On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...
I have a div with an image inside of it, and the overflow of the div is set to hidden so that the image will be cropped if it exceeds the width or height. It was working correctly, but sometimes it doesn't. What could be causing this issue? Here is th ...
Within my ng-repeat, I have two <li> tags repeating a specific number of times. The $index is being used to determine the position of each <li>. You can view a sample on this fiddle: http://jsfiddle.net/sh0ber/cHQLH However, I would like one ...
Recently, I created a website tailored for a viewport size of 1366px by 768px. My goal is to maintain the same design regardless of the browser window size without implementing responsive design techniques. For instance: When viewing the website on a 360 ...
Currently, I am in the process of validating a form using a combination of Javascript and jQuery. Once the validation function is completed, an AJAX call is made to check if a particular entry already exists in a SQL database. The AJAX call works perfectl ...
Currently, I have experience in PHP MVC and recently delved into learning Nodejs. Here is how my app directory structure looks like: root - controllers -user.js - model -user.js - public -stylesh ...
I am currently using Angular 10 along with FullCalendar version 5.3.1., and I am facing an issue where I cannot set the initial view of FullCalendar to day view. It seems to be stuck on the dayGridMonth view by default. Below is the HTML snippet: <full ...
I'm attempting to create a poll feature for my discord bot that displays both the poll question and results as an embedded message. While I've managed to get the poll information in plain text format, I'm encountering an error when trying to ...
I'm encountering an issue while fetching data from the API and trying to map it to display in a table. The problem is that the fetching process doesn't seem to be working properly, resulting in the state remaining undefined when the page loads. I ...