CODEWITHSUNDEEP
htmlcssmedia-queries
Theodore Steiner
Theodore Steiner

Reputation: 1615

Media Queries for Multiple Elements

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>

Upvotes: 0

Views: 3215

Answers (3)

Michael Benjamin
Michael Benjamin

Reputation: 371221

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:

Upvotes: 1

Elias Ghosn
Elias Ghosn

Reputation: 11

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.

Upvotes: 0

Daniel Congrove
Daniel Congrove

Reputation: 3669

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;}
}

Upvotes: 0

Related Questions