The struggle of media queries: How can you reset an element to its original display style when it's set to none?

Question

The struggle of media queries: How can you reset an element to its original display style when it's set to none?

If faced with the following scenario, how would you handle it?

Imagine this: You need to hide a visible element when a specific media query is met:

.myElement {
   display: block;
}

and the media query to hide it:

@media (min-width: 1000px) {
.myElement {
   display: none;
}}

Now, if you want to show a hidden element when a media query is met.

You start by setting its display to none:

.myElement {
   display: none;
}

Then, after using a particular media query for some time and you decide to show it again, so you use:

@media (min-width: 1000px) {
.myElement {
   display: block;
}}

However, now many myElements are using flex layout while others are using block layout, causing the media query to malfunction.

Is there a way to create a media query where it can make the element visible regardless of its display type?

@media (min-width: 1000px) {
.myElement {
   display: initial;
}}

In case the display property is not set on the element class, how does it work? You might specify that the element is currently using Flex but should initially be hidden and then restore a previously defined value:

.myElement {
   display: flex;
   display: none;
}

Does this concept make sense?

html css media-queries

Answer 1

Answer №1

In the case where .myElement can exhibit behaviors of either a block or flex element, it is likely that these properties are inherited from other classes. To address this, I have introduced two additional classes: .block and .flex for demonstration purposes.

Furthermore, a new class called .hide has been created to facilitate toggling the display: none property on and off.

Using JavaScript, we can remove the .hide class from the element when it meets certain media query criteria, thereby restoring its original state as a flex or block element.

It's worth noting that there isn't a direct way to remove a class based solely on the media query without leveraging JavaScript functionality.

To fully experience this demo, please view it in fullscreen mode:

let mql = window.matchMedia("(min-width: 1000px)");
let elems = document.querySelectorAll('.myElement')
mql.addEventListener("change", (e) => {
if (e.matches) {
    /* the viewport is 1000 pixels wide or more */
    console.log("This is a wide screen — more than 1000px wide.");
    elems.forEach((elem) => {
        elem.classList.remove("hide");
    });
} else {
    /* the viewport is less than than 1000 pixels wide */
    console.log("This is a narrow screen — less than 1000px wide.");
    elems.forEach((elem) => {
    elem.classList.add("hide");
    });
}
});

* {
font-family: sans-serif;
}

.hide {
display: none !important;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

EDIT:

In the comments section, @Vladislav proposed an alternative suggestion. If the display: block or display: flex styles applied to .myElement stem from other classes, it may be more efficient to directly modify those classes within the relevant media query. This streamlined approach assumes prior knowledge of which class corresponds to each display property. In cases where classes are dynamically altered, the initial JS method remains preferable.

If you're confident in your understanding of which classes dictate display properties, you can bypass JavaScript entirely by implementing the following CSS solution:

* {
font-family: sans-serif;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

@media (max-width: 1000px) { 
.block, .flex {
display: none;
}
}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

Answer 2

In the case where .myElement can exhibit behaviors of either a block or flex element, it is likely that these properties are inherited from other classes. To address this, I have introduced two additional classes: .block and .flex for demonstration purposes.

Furthermore, a new class called .hide has been created to facilitate toggling the display: none property on and off.

Using JavaScript, we can remove the .hide class from the element when it meets certain media query criteria, thereby restoring its original state as a flex or block element.

It's worth noting that there isn't a direct way to remove a class based solely on the media query without leveraging JavaScript functionality.

To fully experience this demo, please view it in fullscreen mode:

let mql = window.matchMedia("(min-width: 1000px)");
let elems = document.querySelectorAll('.myElement')
mql.addEventListener("change", (e) => {
if (e.matches) {
    /* the viewport is 1000 pixels wide or more */
    console.log("This is a wide screen — more than 1000px wide.");
    elems.forEach((elem) => {
        elem.classList.remove("hide");
    });
} else {
    /* the viewport is less than than 1000 pixels wide */
    console.log("This is a narrow screen — less than 1000px wide.");
    elems.forEach((elem) => {
    elem.classList.add("hide");
    });
}
});

* {
font-family: sans-serif;
}

.hide {
display: none !important;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

EDIT:

In the comments section, @Vladislav proposed an alternative suggestion. If the display: block or display: flex styles applied to .myElement stem from other classes, it may be more efficient to directly modify those classes within the relevant media query. This streamlined approach assumes prior knowledge of which class corresponds to each display property. In cases where classes are dynamically altered, the initial JS method remains preferable.

If you're confident in your understanding of which classes dictate display properties, you can bypass JavaScript entirely by implementing the following CSS solution:

* {
font-family: sans-serif;
}

.myElement {
padding: 5px 10px;
color: white;
}

.block {
display: block;
background-color: #4c40f7;
}

.flex {
display: flex;
background-color: #f74040;
}

@media (max-width: 1000px) { 
.block, .flex {
display: none;
}
}

<div class="myElement block hide">
    <div class="block">This is block 1</div>
    <div class="block">This is block 2</div>
</div>
<div class="myElement flex hide">
    <div class="flex">This is flex 1</div>
    <div class="flex">This is flex 2</div>
</div>

The struggle of media queries: How can you reset an element to its original display style when it's set to none?

Answer №1

Similar questions

Adjust the white background to match the gray background seamlessly

Developing interactive checkboxes for individual rows through React.js

Issues with retrieving the subsequent anchor element using Jquery Slider

Changing HTML tags programmatically in Angular while inheriting a template

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Ways to showcase information from an angular service

Creating a Stylish Navigation Bar with Bootstrap4 - Organizing Elements for Just the Right Look

The implementation of jQuery within an included HTML file may not function properly

positioning newly generated dropped elements within the DOM structure dynamically

Add the information from the form to a JSON document

What is the method for increasing the left margin of the back button on the default header in React Native?

Switching between Angular components with a button press

swap the positions of two distinct texts

Having trouble uploading an image to firebase storage as I continuously encounter the error message: Unable to access property 'name' of undefined

Error: The column 'joinedactivities.searchact id = searchact.id' is not recognized in the 'on clause'

What is the best way to use PHP to call an ACF variable and substitute a nested HTML element?

What are the best ways to position elements within a div?

Steps for implementing a Toggle Navigation Bar in CSS

Check the radio box corresponding to the adjacent label

Creating a personalized navbar design using Bootstrap