Imagine having the following HTML structure:
<div class="outer">
<div class="inner">
</div>
</div>
However, under the condition
@media (min-width: 890px) and (max-width: 958px)<div class="inner">
<div class="outer">
</div>
</div>
Do you think this is achievable? If yes, how would you go about implementing it?
You must have Javascript enabled to view this content.
The .matchMedia() method is utilized as a replacement for our @media query.
const query = window.matchMedia('(min-width: 890px) and (max-width: 958px)');
function handleMediaQuery(query) {
if (query.matches) { // Check if media query matches
const firstElement = document.querySelector(".outer");
const secondElement = document.querySelector(".inner");
firstElement.className = "inner";
secondElement.className = "outer";
} else {
// do nothing
}
}
handleMediaQuery(query);
If you want to achieve a similar effect, you can try the following approach:
.outer > .inner {
// apply some styling here
}
@media (min-width: 890px) and (max-width: 958px) {
.inner > .outer {
// apply some styling here for this specific media query
}
}<div class="inner outer">
<div class="inner outer"></div>
</div>One way to achieve this is by using the order property in CSS, as shown below:
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 1;}
div#myPinkDIV {order: 3;}
@media (max-width: 600px){
div#myRedDIV {order: 4;}
div#myBlueDIV {order: 2;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}
}
#main {
width: 400px;
height: 150px;
display: flex;
}
#main div {
width: 50px;
height: 100px;
}<div id="main">
<div style="background-color:coral;" id="myRedDIV"></div>
<div style="background-color:lightblue;" id="myBlueDIV"></div>
<div style="background-color:lightgreen;" id="myGreenDIV"></div>
<div style="background-color:pink;" id="myPinkDIV"></div>
</div>I am currently in the process of building a page inspired by the design of Hello Monday. Right now, I have added static content before implementing the parallax effect and auto-scroll. Here is my progress so far: Check out the Sandbox Link One challenge ...
I am currently exploring options to streamline my code so that I don't need to repeat the same function 38 times. Instead, I would like to have a single function that can handle 38 different IDs separately. The script is designed to randomly select a ...
After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...
Currently, I am in the process of learning nodejs and expressjs and attempting to integrate it into the Spring MVC pattern. My intention behind this is to maintain cohesion within my files. However, the results are not quite aligning with my expectations.. ...
I am trying to serve the build files of my React app on another Express application. I have copied all the static files from the build folder to the public folder inside my Express application and have set up the following code: app.use(express.static(pat ...
I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...
During the process of updating an unfamiliar old script from version 0.11 to 2.5.4, an alert popped up stating: To address the warning message saying 'Replace this.$eval('reportData | reportFilter false') with a solution using normal Java ...
My JavaScript codes for scrolling images are not displaying all the images when viewed on Google Chrome. Is there a solution available? Below is the included JS code and CSS. data=[ [" images/img1.jpg"," Image1","pic01.jpg"], [" images/img2.jpg","Image2 " ...
If the user interacts with the checkbox, I don't want the handleClick function to execute. Is there a way to exclude it or prevent the click event from triggering? <div ... onClick={this.handleClick}> <div> some content here < ...
I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...
Currently, I am in the process of developing a Cordova application and require OAuth authentication with my Drupal backend. My main issue lies in obtaining a request token for this purpose. Despite receiving a 200 response indicating success, when inspecti ...
Recently, I took a Drawing class and learned about creating objects: export class Drawing { constructor(texture) { const material = new MeshBasicMaterial({ color: 0xffffff, map: texture }); this.m ...
I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...
I am facing challenges in customizing the GoJS Pipes example to include text within the "pipes" without disrupting the layout. Although I referred to an older response on the same query here, it seems outdated or not detailed enough for me to implement wit ...
I have a straightforward test code for implementing dynamic components in Angular 4. @Component({ selector: 'component', template: ` <ul><li #item *ngFor="let number of list">{{number}}</li></ul> <ng-temp ...
In my Rails 4 application, I am looking to save questions and answers either in a document or database. Once stored, I want to showcase them on a specific webpage for users to respond. For instance, I envision having a page titled /questions where a quest ...
While working with React, I've noticed that it renders twice in Strict mode during development to ensure the function remains pure without any side effects. However, I'm facing some inconsistency in retrieving the state in my case. It seems like ...
I recently added a Bootstrap menu to my website that I'm currently working on. I am curious about how to disable the hover background color for Bootstrap links. Here's the situation: Below is an example of the menu I implemented: Currently, whe ...
I created a tool for users to submit data. If the submitted data does not pass validation (validation returns false), I need to respond with an error 500 status code to the user. The issue is that when I use res.status(500), it causes the program to exit ...
How can I customize collapsible content in Bootstrap 4? For instance, take a look at this navbar: https://i.sstatic.net/UYbMQ.png https://i.sstatic.net/OuVdw.png https://i.sstatic.net/lXvYt.png I'm looking to modify the behavior of this example. ...