0

Background info: I'm working on finalizing a website that has four structural sections: banner, header, interest section, and footer. Using media queries, I have made the banner, interest section, and footer sections responsive. The only section that isn't working after applying media queries is the header.

Question: What's the best way to target deeply nested elements using media queries? All of my queries work except in one section that has particularly deep nests. As you'll see below, I've tried the simpler ul.interests, but I'm wondering if because of the nesting I need to do more, ie something like header div.row div.col.span-1-of-2.box ul.interests. (Although, this also doesn't target the element.) Yikes! Thanks in advance!

Already check the following posts: CSS Media queries and div elements; Targeting nested elements with CSS

HTML for Header Section

<header>
    <div class="row">
        <div class="col span-1-of-2 portrait">
            <img src="resources/img/image1.jpg" alt=" portrait" />
            <h2 class="portrait_override">Name</h2>
        </div>

        <div class="col span-1-of-2 box">
            <ul class="interests">
                <li><a href="#section-interests">Interest #1</a></li>
                <li><a href="#section-interests">Interest #2</a></li>
                <li><a href="#section-interests">Interest #3</a></li>
            </ul>
            <h1>Name</h1>
            <p>Short Bio - Be brave. Let's put some happy trees and bushes back in here. You can do anything here. So don't worry about it. Follow the lay of the land. It's most important. Be brave. Let's put some happy trees and bushes back in here. You can do anything here. </p>
            <ul class="icon-nav">
                <li><a href="https://about.me/"><i class="ion-person"></i></a></li>
                <li><a href="https://www.facebook.com/"><i class="ion-social-facebook"></i></a></li>
               <li><a href="https://twitter.com/"><i class="ion-social-twitter"></i></a></li>
               <li><a href="https://www.instagram.com/"><i class="ion-social-instagram"></i></a></li>
               <li><a href="https://www.tumblr.com/"><i class="ion-social-tumblr"></i></a></li>
            </ul>
        </div>
    </div>
</header>

REGULAR CSS for UL

/*  List of Interests */

ul.interests {
    background-color: #eee;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    width: 90%;
    margin: 0 5%;
    margin-top: 2%;
}

.interests li { 
    font-size: 80%;
    margin: 0 4%;
    transition: color 0.2s;
}

.interests li:first-child { margin-left: 8%; }
.interests li:last-child { margin-right: 4%; }

.interests li:hover,
.interests li:active { background-color: #555; }

.interests li a:link,
.interests li a:visited{
    text-decoration: none;
    color: #555;
    transition: color 0.2s;    
}

.interests li a:hover,
.interests li a:active { color: #ccc; }

MEDIA QUERY

/* Big tablets to 1200px (widths smaller than the 1140px row) */
@media only screen and (max-device-width: 1140px) {

/* BANNER */
    /* no changes */

/* HEADER */

ul.interests {
    background-color: yellow;    
    }  

/* INTERESTS SECTION */    


/* FOOTER */    

}  /* closes the media tag */

IMAGE Site - Post Media Query @ 1129px

Community
  • 1
  • 1
knittingarch
  • 55
  • 8
  • 2
    Looks good to me (https://jsfiddle.net/1tvmjxv4/1/) - notice i've changed `max-device-width` to `max-width` so that this will work in a desktop browser. Are you certain that you are loading your media query code _after_ your other CSS? – Turnip Jan 19 '16 at 12:53
  • Thank you!! Goodness! I just made the same change, and it's showing up. Hours wasted yesteday. Sigh. I need to read up on max-device-width vs. max-width. Clearly I don't understand it like I thought I did! – knittingarch Jan 19 '16 at 13:00
  • Use `max-width` unless targeting a specific device with known dimensions. – Turnip Jan 19 '16 at 13:01
  • This was super helpful! How can I upvote this answer? – knittingarch Jan 19 '16 at 13:03

0 Answers0