Question 43207 in Html Question posted in
Some basic documentation can be found here.

Media Query is not working for flex-direction – Html

new to designing webpages here. I am trying to make the divs in the class from flex-direction: column to flex direction: row when it hits 650px, but it cannot get overwritten with the media query . When I inspected the flex container in the developer tools, the property is strike-through. Any ideas what went wrong here?

enter image description here

HTML:

<div class="flex-group">

    <div class="stat1">
        <h2>10k+</h2>
        <p>companies</p>
    </div>

    <div class="stat2">
        <h2>314</h2>
        <p>templates</p>
    </div>

    <div class="stat3">
        <h2>12M+</h2>
        <p>queries</p>
    </div>
</div>

CSS:

.flex-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    font-size: 1rem;
    margin-top: 1rem;
}

@media (min-width:600px) {
    .flex-group {
        flex-direction: row;
    }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have solved the issue, it was due to the order of the css styles. Previously, I defined the media query before the 'flex-group' class itself. After placing it correctly, the media query is working.


  2. 0

    This should apply when the view port is wider than 600px. If you want it to apply when for example the screen is wider than 600px you have to define

    @media screen and (min-width: 600px){
....
}

    Maybe that solves the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search