Unresponsive Web Design

My CSS code for screen sizes less than 750px is not functioning at all and I have no clue why, nor does chatGPT. The code should align the nav bar vertically and eliminate the fixed header. Instead, the code is completely ignored. What am I missing? Any suggestions much appreciated.

It’s worth noting previous @media code for screen sizes less than 1070px only worked if I added section before .container and left-right- column. I have no clue why this is even necessary, but it doesn’t work properly otherwise.

Below are the HTML and CSS code.

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>East End Tennis Club</title>
        <link href="./Resources/CSS/styles.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <nav>
                <ul class="main-nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#tournaments">Tournaments</a></li>
                    <li><a href="#travel-team">Travel Team</a></li>
                    <li><a href="#rankings">Rankings and Results</a></li>
                    <li><a href="#join">Join</a></li>
                    <li><a href="#login">Login</a></li>
                </ul>
            </nav>
        </header>
        <section id="home">
            <h1 class="hero-title">Welcome to the East End Tennis Club Homepage!</h1>
            <div class="container">
                <div class="left-column">
                <p>Experience the <b>thrill of tennis </b> and become a part of our <b>dynamic tennis club</b>.</p>
                <p>Our club offers a range of offerings to novices eager to learn the game or seasoned players seeking competitive opportunities.</p>
                </div>
                <div class="right-column">
                <img src="./Resources/Images/hero.jpg" alt="club courts">
                </div>
            </div>
        </section>    

        <section class="gray-section" id="tournaments">
        <div class="container">
                <div class="left-column">
                    <img src="./Resources/Images/Young-tennis-player.jpg">
                </div>  
                <div class="right-column">
                    <h2 class="section-title">Exciting Skill-based Local Tournaments</h2>
                    <p>We <b>host regular tennis events </b>that cater to players of <b>all skill levels</b>.</p>
                    <p>Participate in exciting competitions, meet fellow tennis enthusiasts, and showcase your skills on the court.</p>
                </div>  
            </div>     
        </section>

        <section class="white-section" id="travel-team">
            <div class="container">
                <div class="left-column">
                    <h2 class="section-title">Highly Competitive Travel Team</h2>
                    <p>Challenge yourself, build camaraderie, and explore new tennis destinations by competing against other clubs and players from different regions with our esteemed travel team.</p>
                </div>  
                <div class="right-column">
                    <img src="./Resources/Images/Travel-team.jpg">
                </div>  
            </div>
        </section>
            
        <section class="gray-section" id="rankings">
            <div class="container">
                <div class="left-column">
                    <table class="players-rank">
                        <thead>
                            <tr>
                                <th class="rank-title" colspan="4">Men's Player Rankings</th>
                            </tr>
                        </thead>
                        <tbody class="rank-table">
                            <tr class="rank-headings">
                                <td class="column-1">Rank</td>
                                <td class="column-2">Name</td>
                                <td class="column-3">Record</td>
                                <td class="column-4">Win Pct.</td>    
                            </tr>
                            <div class="rank-data">
                                <tr>
                                    <td class="column-1">1</td>
                                    <td class="column-2">Louis Goodwin</td>
                                    <td class="column-3">36-2</td>
                                    <td class="column-4">0.947</td>
                                </tr>
                                <tr>
                                    <td class="column-1">2</td>
                                    <td class="column-2">Max Fulton</td>
                                    <td class="column-3">35-3</td>
                                    <td class="column-4">0.921</td>
                                </tr>    
                                <tr>
                                    <td class="column-1">3</td>
                                    <td class="column-2">Devin Lacy</td>
                                    <td class="column-3">32-3</td>
                                    <td class="column-4">0.914</td>
                                </tr>    
                                <tr>
                                    <td class="column-1">4</td>
                                    <td class="column-2">Karl Gross</td>
                                    <td class="column-3">38-4</td>
                                    <td class="column-4">0.904</td>
                                </tr>
                                <tr>
                                    <td class="column-1">5</td>
                                    <td class="column-2">Floyd Burnett</td>
                                    <td class="column-3">37-5</td>
                                    <td class="column-4">0.881</td>
                                </tr>
                            </div>

                        </tbody>
                    </table>
                </div>  
                <div class="right-column">
                        <h2 class="section-title">Live Player Rankings and Game Results</h2>
                        <p>Stay informed about the latest game results and track your progress within our club.</p>
                        <p>We provide regular updates on match outcomes, league standings, and individual player statistics.</p>
                </div>  
        </section>
        <section class="white-section" id="join">
            <div class="container">
                <div class="left-column">
                    <h2 class="section-title">Unparalleled Courts and Facilities</h2>
                    <p>As a member, you'll gain access to <b>16 prestine courts and a worldclass clubhouse</b> with a restaurant and bar.</p>
                    <p>Embrace the <b>camaraderie, competition, and fun </b>that comes with being a member of our tennis club.</p>
                    <div class="join-button">
                    <button>Join Today!</button>
                    </div>
                </div>  
                <div class="right-column">
                    <img src="./Resources/Images/Courts.jpg">
                </div>  
            </div>
        </section>

        <section class="gray-section">
            <div class="image-container">
                <div class="lifestyle-images">
                    <img src="./Resources/Images/Female-doubles.jpg" alt="Woman's travel team doubles">
                    <caption>Woman's travel team doubles</caption>
                </div>    
                <div class="lifestyle-images">
                    <img src="./Resources/Images/Male-Serve.jpg" alt="Friendly local singles match">
                    <caption>Friendly local singles match</caption>
                </div>    
                <div class="lifestyle-images">
                    <img src="./Resources/Images/Kid-player.jpg" alt="Young child playing tennis">
                    <caption>Fun for all ages</caption>
                </div>
            </div>
        </section>

    </body>
</html>
html{
    font-size: 24px;
    box-sizing: border-box;
    }

@media only screen and (max-width:1460px) {
    html{font-size:20px;}
}

@media only screen and (max-width:1070px){
    /* html{font-size:18px;} */
    section .container {display: block;}
    section .left-column, section .right-column{width:100%;}
    .gray-section .container{
        display: flex;
        flex-direction: column-reverse;
    }
}

@media only screen and (max-width:750px){
    header {
        position:static;
    }
    .main-nav{
        display: block; 
        }
    .main-nav a{
        padding-top: 1rem;
        text-align: center;
    }
}

header{
    position:fixed;
    z-index: 100;
    width:100%;
    top: 0rem;
    left: 0rem;
    background-color:#457273ff; 
}

.main-nav{
    display: flex;
    list-style: none;
    justify-content: space-around;
    font-weight: 600;
    font-size: 1rem;
    }

.main-nav a{
    text-decoration: none;
    color: #fff;
}

.main-nav a:hover{
    border-bottom: 0.2rem #e4ff1aff solid; 
    cursor: pointer;
    font-weight: 900;
    color: #e4ff1aff;
}

.hero-title{
    text-align: center;
    color: #457273ff;
    margin-top: 6rem;
    padding: 0rem 2rem 1rem 2rem; 
    }

#home .container{
    padding: 0rem 2rem 2rem 2rem;
}
.container{
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    padding: 2rem 2rem;
}

.container p{
    margin-top: 0;
} 
.left-column{
    width: 48%;
    line-height: 2rem;
    }

.right-column{
    width: 48%;
    line-height: 2rem;
}

img{
    max-width: 100%;
    height: auto;
}

.gray-section{
    background-color: #e9ecef;
    }
   
.section-title{
    margin-top: 0rem;
    color: #457273ff;
}

.players-rank{
    margin: 0 auto;
    border: solid black 0.2rem;
    }

.rank-table{
    font-size: 0.95rem;
}
.rank-headings td {
    text-decoration: underline;
    vertical-align: bottom;
    line-height:1rem;
}

.column-1, .column-2, .column-3, .column-4{
    vertical-align: top;
    line-height:1.2rem;
} 

.rank-title{
    padding: 1rem 0rem;
    text-align: center;
 }

.column-1{
    padding-left: 1rem;
    text-align: right;
}

.column-2 {
    padding: 0rem 2rem;
}

.column-3{
    padding-right: 1rem;
    text-align: right;
}

.column-4{
    padding-right: 1rem;
    text-align: right;
}

.join-button{
    display: flex;
    justify-content: center;
}

#join button {
    border: black solid 0.1rem;
    border-radius: 1rem;
    padding: 1rem 1rem;
    background-color: #14213dff;
    color: #fff;
    font-size: 1rem;
    margin: 2rem auto;
    background-color: #e4ff1aff; 
    color:  #000;
    font-weight: 600;
}

#join button:hover{
    background-color:  #457273ff; 
    color:  #fff;
    font-weight: 900;
    cursor: pointer;
}

.image-container{
    display: flex;
    font-size: 1rem;
    justify-content: space-between;
    padding: 2rem 2rem; 
}

.lifestyle-images{
    max-width:30%;
    text-align:center;
}
1 Like

Hi @py9495879272,

I have checked your code and noticed a major issue regarding the order of the CSS code.

The @media rule is written before the default style, causing the code below to overwrite the @media rule.
To resolve this, try moving your @media rule below the CSS selector. This should fix the issue.
I added three background colors in different screen px for testing, you could remove them as well.

I hope this is helpful to you.

html{
    font-size: 24px;
    box-sizing: border-box;
    }


    header{
        position:fixed;
        z-index: 100;
        width:100%;
        top: 0rem;
        left: 0rem;
        background-color:#457273ff; 
    }
    
    .main-nav{
        display: flex;
        list-style: none;
        justify-content: space-around;
        font-weight: 600;
        font-size: 1rem;
        }
    
    .main-nav a{
        text-decoration: none;
        color: #fff;
    }
    
    .main-nav a:hover{
        border-bottom: 0.2rem #e4ff1aff solid; 
        cursor: pointer;
        font-weight: 900;
        color: #e4ff1aff;
    }
    
    .hero-title{
        text-align: center;
        color: #457273ff;
        margin-top: 6rem;
        padding: 0rem 2rem 1rem 2rem; 
        }
    
    #home .container{
        padding: 0rem 2rem 2rem 2rem;
    }
    .container{
        display: flex;
        font-size: 1rem;
        justify-content: space-between;
        padding: 2rem 2rem;
    }
    
    .container p{
        margin-top: 0;
    } 
    .left-column{
        width: 48%;
        line-height: 2rem;
        }
    
    .right-column{
        width: 48%;
        line-height: 2rem;
    }
    
    img{
        max-width: 100%;
        height: auto;
    }
    
    .gray-section{
        background-color: #e9ecef;
        }
       
    .section-title{
        margin-top: 0rem;
        color: #457273ff;
    }
    
    .players-rank{
        margin: 0 auto;
        border: solid black 0.2rem;
        }
    
    .rank-table{
        font-size: 0.95rem;
    }
    .rank-headings td {
        text-decoration: underline;
        vertical-align: bottom;
        line-height:1rem;
    }
    
    .column-1, .column-2, .column-3, .column-4{
        vertical-align: top;
        line-height:1.2rem;
    } 
    
    .rank-title{
        padding: 1rem 0rem;
        text-align: center;
     }
    
    .column-1{
        padding-left: 1rem;
        text-align: right;
    }
    
    .column-2 {
        padding: 0rem 2rem;
    }
    
    .column-3{
        padding-right: 1rem;
        text-align: right;
    }
    
    .column-4{
        padding-right: 1rem;
        text-align: right;
    }
    
    .join-button{
        display: flex;
        justify-content: center;
    }
    
    #join button {
        border: black solid 0.1rem;
        border-radius: 1rem;
        padding: 1rem 1rem;
        background-color: #14213dff;
        color: #fff;
        font-size: 1rem;
        margin: 2rem auto;
        background-color: #e4ff1aff; 
        color:  #000;
        font-weight: 600;
    }
    
    #join button:hover{
        background-color:  #457273ff; 
        color:  #fff;
        font-weight: 900;
        cursor: pointer;
    }
    
    .image-container{
        display: flex;
        font-size: 1rem;
        justify-content: space-between;
        padding: 2rem 2rem; 
    }
    
    .lifestyle-images{
        max-width:30%;
        text-align:center;
    }


@media only screen and (max-width:1460px) {
    html{font-size:20px;}
    header {
        background-color: #0f0;  /* for testing */
    }
}

@media only screen and (max-width:1070px){
    /* html{font-size:18px;} */
    section .container {display: block;}
    section .left-column, section .right-column{width:100%;}
    .gray-section .container{
        display: flex;
        flex-direction: column-reverse;
    }

    header {
        background-color: #00f;  /* for testing */
    }

}

@media only screen and (max-width:750px){
    header {
        position:static;
        background-color: #f00; /* for testing */
    }
    .main-nav{
        display: block; 
        }
    .main-nav a{
        padding-top: 1rem;
        text-align: center;
    }
}

3 Likes

Thanks Vito. Your suggestion worked perfectly. The temporary use of colors for the various media screens also made it easy to see if the code was working properly.

1 Like

I’m glad you got this working, but this just made me laugh out loud, I love it :rofl:

1 Like