reset elements for media queries

Question

Can anyone suggest a way to undo the display property?

I have three divs which I gave the value; display: inline-flex; so that they would appear horizontally. When creating my media queries, I want to remove this so that they will appear vertically. I thought display: initial; would work but no luck. neither does targeting the divs individually with display: block;

Welcome. Please see [ask] and take the [tour]. You need to provide more information, ideally in a functioning snippet. — isherwood, Nov 05 '21 at 15:05
Please provide enough code so others can better understand or reproduce the problem. — Community, Nov 06 '21 at 11:33

score 0 · Answer 1 · answered Nov 05 '21 at 15:49

You haven't given the code that you used but still I understand the issue. You are using display: inline-flex; on the three divs, inline flex is a property used for div containers and it will align all the divs inline.

a simple solution I would suggest is that you wrap a container around those divs and give the container the property of display: flex

here is the HTMl

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

here is the CSS

.container{
    display: flex;
    width: 100%;
}
#div1,#div2,#div3{
    width: 100px;
    height: 100px;
    border: 2px solid #000;
}

@media (max-width: 400px) {
    .container{
        display: block;
    }
}

also, here is a link so you can see it in action, resize the screen to see the media query in effect https://codepen.io/codebyrudra/pen/NWvyVzd

Thank you Rudy, that worked. I've been pulling my hair out most of the day with this. — tagjami, Nov 05 '21 at 17:48

reset elements for media queries

1 Answers1