Media Queries for Multiple Elements

Question

New to media queries. But I think I've missed the boat somewhere.

Suppose I have a topBar like the one in the snippit below, made up of a topBar container, fixed width, and a list, and the entire unit is floated to the right. I would like it so as long as the screen is resized until, let's say 1000px, for the topBar to shrink along with the screen as it is resized. When it hits 1000px something else will happen, but we can worry about that later.

For this to work, do I need to set queries for both the topBar container and topBar fixed width, or just the container? Also, is it a Max width or a min width that I should be targeting for the overall screen?

#top-menu
{
    width: 100%;
    background-color: white;
    height: 40px;
    color: #00a5b5
}

#topMenu-fixedWidth
{
    height: 80px;
    width: 1156px;
    color: #00a5b5;
    margin: 0 auto;
}

#topMenu-fixedWidth ul
{
    list-style: none;
    float: right;
    margin-right: 5px;
}

#topMenu-fixedWidth ul:nth-child(4)
{
    margin-right: 0;
}

#topMenu-fixedWidth ul li
{
    float: left;
    margin: 10px;

      <div id="top-menu">
            <div id="topMenu-fixedWidth">
                <ul>
                    <li class="topMenuText">Partners</li>
                    <li class="topMenuText">Careers</li>
                    <li class="topMenuText">Language</li>
                    <li class="topMenuText">Login</li>
                </ul>
            </div>
        </div>

In doing some more research into your question, I discovered a post with some very good answers. I think you'll find them useful. I updated my answer with the link reference. I also posted a link to a related answer I wrote last year. — Michael Benjamin, Jan 17 '17 at 18:25

score 1 · Accepted Answer · edited May 23 '17 at 12:24

Since you want content to re-size along with a re-sizing screen, you should use viewport percentage lengths, such as vh and vw. Elements will be sized relative to the viewport.

Also, is it a Max width or a min width that I should be targeting for the overall screen?

Either. Doesn't really matter, unless you have a specific need.

@media ( min-width: 1000px ) {
    /* executes code here when the screen is 1000px or more */   
}

@media ( max-width: 1000px ) {
    /* executes code here when the screen is 1000px or less */   
}

More information:

score 0 · Answer 2 · answered Jan 16 '17 at 20:54

You have your base css which applies to all screen sizes. Then beyond that, you just set whatever css classes you want to change when the screen size changes. For example if you want remove the float below 1000px, you would do the following:

#topbar {float: right;}
@media screen and (max-width: 1000px) {
    #topbar {float: none;}
}

score 0 · Answer 3 · answered Jan 16 '17 at 20:55

Your #top-menu already has a width of 100% so that will resize no matter what. Your #topMenu-fixedWidth will need to be inside of a media query like so:

@media screen and (min-width 1000px){
    #topMenu-fixedWidth
    {
        height: 80px;
        width: 1156px;
    }
}

*note: You only need to include the styles you want to change within the media query.

Media Queries for Multiple Elements

3 Answers3