@media not switching flex orientation

HTML-CSS
1

Hi,

I am working through the following Responsive Web Design project and trying to get the following html content to switch from a centered flex row to a centered flex column when screen is narrower than 500px. The browser is reading the initial content but not the @media query specs.

Thank you!

html

<div id="trombone-types">

            <div id="tenor">
                <p>TENOR TROMBONE
                <br>
                <br>
                $600
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum dolor.
                <br>
                <br>
                Lorem ipsum.
                </p>
                <br>
                <button type="submit">
                    SELECT
                </button>
                <br>
                <br>
            </div> 

            <div style="height: 20px;"></div>
            
            <div id="bass">
                <p>BASS TROMBONE
                <br>
                <br>
                $600
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum dolor.
                <br>
                <br>
                Lorem ipsum.
                </p>
                <br>
                <button type="submit">
                    SELECT
                </button>
                <br>
                <br>
            </div>
            
            <div style="height: 20px;"></div>
        
            <div id="valve">
                <p>VALVE TROMBONE
                <br>
                <br>
                $600
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum.
                <br>
                <br>
                Lorem ipsum dolor.
                <br>
                <br>
                Lorem ipsum.
                </p>
                <br>
                <button type="submit">
                    SELECT
                </button>
                <br>
                <br>
            </div>     
        </div>

CSS

#trombone-types {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


@media (max-width:500px) {
    #trombone-types {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

Latest version of Chrome

Challenge: Build a Product Landing Page

Link to the challenge:

2

Rather than snippets of your code it’s best to provide a link to your project so we can see what’s happening.

On a side note, you shouldn’t replicate the sample projects. They are just examples showing one way the project can be completed. The instructions say yours should be “functionally similar” and to “give it your own personal style”.

1 Like
3

Hey @jkhloomis thanks for posting! I did a quick search on Google and think I found your error.

Check out this article and see if this helps: CSS3 Media Queries - Examples

1 Like
4

I edited your post so all of the HTML shows up (it was missing the container).

Unless you just didn’t paste in all the CSS you are missing the closing } for the media query. When I correct that and test your code it works as expected for me.

1 Like
5

Thank you!
Are you saying that the code I gave you up there behaves as I described? I do indeed have the missing } in my own code. Currently trying to clean up things to see if there is just a typo somewhere.

6

Hi, I am not using codepen but have the file on my computer. What would be the best way to share the entire project that way?
Thanks

7

Ok. I am not sure what changed but the problems seems to have resolved itself. It might have been the fact that my width was small and so I wasn’t noticing the change (:confused: sort of doubt that is the case). Either way it was still helpful to get the feedback!

Thank you!

8

When you submit the project it has to be somewhere live. Not the code so whereever you put your code when you submit it you could provide that link when asking for help.

9

Thank you. I will c/p into a live editor from now on.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.