https://i.sstatic.net/hdcKn.png I'm really intrigued by the idea of making divs overlap each other in a unique way. I wonder if it's possible and if there are techniques to make this responsive using Bootstrap or another library. Could the divs adjust their configuration so the content still makes sense? (like in the image below) https://i.sstatic.net/RH6mf.png If responsiveness isn't achievable, is there a solution to hide the entire layout and display something different instead?
If you're looking to get started, this code snippet may help you kick things off.
To achieve the desired layout, you'll have to utilize both @media queries and the flex property.
For more information on @media queries, check out: CSS @media Rule
You can learn about using flex box effectively here: A Complete Guide to Flexbox
Feel free to test the code by resizing the output window for dynamic results!
Check it out here on JSFiddle: JSFiddle
.panel-container {
}
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.panel {
}
.col {
display: flex;
flex-direction: row;
justify-content: space-around;
}
#a1 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#a2 {
background-color: blue;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#a3 {
background-color: blue;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b1 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
#b2 {
background-color: red;
height: 100px;
width: 100px;
border-radius: 50%;
line-height: 100px;
text-align: center;
}
#b3 {
background-color: red;
height: 100px;
width: 100px;
line-height: 100px;
text-align: center;
}
@media only screen and (max-width: 600px) {
.container {
display: flex;
flex-direction: column;
}
.col {
display: flex;
flex-direction: column;
}
} <div class="container">
<div class="col">
<div id="a1">A1</div>
<div id="a2">A2</div>
<div id="a3">A3</div>
</div>
<div class="col">
<div id="b1">B1</div>
<div id="b2">B2</div>
<div id="b3">B3</div>
</div>
</div>
<div class="panel-container">
<div id="lhs" class="panel"></div>
<div id="rhs" class="panel"></div>
</div>Yes, it is possible to achieve this using CSS flexbox.
Here is a helpful guide on using flexbox
You can switch the flex direction of the container element with a CSS media query to solve this issue. This problem is more related to HTML/CSS rather than JavaScript.
I have been attempting to pass an argument to a directive through element attributes as shown in the snippet below: directive app.directive('bgFluct', function(){ var _ = {}; _.scope = { data: "@ngData" } _.link = function(scope, el ...
I am attempting to toggle the visibility of an iframe using a button or anchor element. I found a fiddle created by Sethen posted in this answer, and used it to create my own version. It works perfectly with jQuery 1.8.3, but when I try to use a newer ver ...
After successfully sending JSON data to a specified URL using Postman and receiving the required response in JSON format, I intended to send this JSON data to another file by utilizing AJAX post method. However, to my dismay, the Ajax post method failed to ...
I am facing an issue with integrating tinymce with webpack. It assigns a property called tinymce to window, so one solution is to use the following syntax to require() it (as explained in the bottom of the EXPORTING section of the webpack documentation): ...
Currently exploring the capabilities of AG-grid library along with react to display data in a table. Here is a basic illustration of my objective: Soccer Player player1 player2 player3 I am aiming to adjust the color of each column based on the number of ...
I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...
Having an issue with a WordPress template that features a blue "headline" box that I need to change the color of to #333399. I tried inspecting the element, browsing through the code, and identified the code below as what needed modification: #headline, # ...
Hey there! Is it possible to use JavaScript to retrieve an image from the system clipboard (Windows/Mac) and paste it into a website? ...
Here is the code snippet related to the issue: server.js file: app.post('/user', function(req,res){ console.log(req.body); var user = mongoose.Schema('User',req.body); user.save(function(err,user){ if(err) console.l ...
I'm struggling to understand why my click function isn't functioning properly. You can view the JSFiddle here: http://jsfiddle.net/adbakke/ve9oewvh/ This is a condensed version of my HTML structure: <div class="projectDisplay"></div&g ...
I am facing an issue with my form and VueJS. Upon clicking the "Login" button, I intend to change the text on the button. However, instead of achieving this, I encounter an error stating 'cannot use 'in''. Below is the HTML code snippet ...
Below is the code snippet I have been working on function linkFunc(scope, element, attr){ var clickedElsewhere = false; $document.on('click', function(){ clickedElsewhere = false; console.log('i ...
I am trying to figure out how to retrieve the "good" array from an angular function. Here is the function I have in my Angular code: app.run(function($rootScope,Communications,$http,$filter) { $rootScope.getCommunication = function(object_type ...
I have been working on incorporating bootstrap tabs into one of our pages. I followed the example provided at https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior, but unfortunately, the tabs are not functioning correctly (they appear as ...
Currently, I am facing a challenge with implementing a dropdown menu in my Bootstrap navbar. I am testing it out on JSFiddle to troubleshoot the issue. Here is the correct link: https://jsfiddle.net/addlemanrachel/n9m8fjm8/. Below is the HTML code I am wo ...
I am trying to obtain the current date, but I am struggling to format it in the desired way. Most methods that I have come across use - as separators, whereas I need them to be separated by /. I attempted a manual approach like this: const today = new Dat ...
Check out my code snippet here: http://jsfiddle.net/52VtD/7462/ I'm facing an issue where I want to align my dropdown and buttons on the same line, but the dropdown being a div, it stays on the line below. How can I ensure they are on the same line? ...
Working within Angular 4, I've set up a navbar and menu component that lists various tasks pulled from a web service. Clicking on a task in the menu component opens up the edit task component, which displays a form for editing the task. The form fiel ...
$ node test.js internal/modules/cjs/loader.js:883 throw err; ^ I have exhausted all possible solutions, including checking the PATH route for Node.js, restarting, and using different files. Despite the fact that I am able to retrieve the version when ...
When nesting multiple spans within each other and giving them borders, their horizontal borders overlap by default while their vertical borders stack. Check out a live example on JsFiddle: https://jsfiddle.net/4un9tnxy/ .html: <span><span>a& ...