Html Question posted in
Some basic documentation can be found here.

Html – Can I use CSS to change header content when window in minimized?

I am trying to mimic a website design from a clothing brand to get a better understanding of HTML CSS. I want to know if the header content can be changed when the window size in a smaller view, through CSS, or if I’ll need JS.

As you can see in full screen mode, there are two sections: category and support
But in minimized view the header says: Download the app

I couldn’t find any solution online so I’m posting here hoping for some answers. Below is my code if it is of any help:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>The Souled Store</title>
        <link rel="stylesheet" href="TSS Clone Header.css">
        <link rel="stylesheet" href="TSS general.css">
    </head>
    <body>
        <div class="first-header">
            <div class="outfit-selection-by-gender">
                <div class="women-section">
                    <button class="women">
                        WOMEN
                    </button>
                </div>
    
                <div class="men-section">
                    <button class="men">
                        MEN
                    </button>
                </div>
    
                <div class="kids-section">
                    <button class="kids">
                        KIDS
                    </button>
                </div>
            </div>
            <div class="support-section">
                <div class="order-tracking-section">
                    <button class="order-tracking-button">
                        TRACK ORDER
                    </button>
                </div>
    
                <div class="contact-us-section">
                    <button class="contact-us-button">
                        CONTACT US
                    </button>
                </div>
    
                <div class="app-download-section">
                    <button class="app-download-button">
                        DOWNLOAD APP
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

.first-header {
    height: 45px;
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgb(237, 45, 47);
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap:;
}

.outfit-selection-by-gender {
    display: flex;
    flex: 1;
    justify-content: start;
}

.women {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.men {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: none;
    padding: 12px 20px 12px 20px;
}

.kids {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.support-section {
    display: flex;
    justify-content: end;
}

.app-download-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.contact-us-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.order-tracking-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}
Tags:

2

Answers


  1. 0

    Your HTML needs to have the viewport meta tag.

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    Using ONLY CSS, I used media query to toggle HTML element display. Screen widths of 600px and less will see the mobile-banner. At the same time, this will hide the class element of first-header.

    HTML

    <!DOCTYPE html>
<html>
    <head>
        <title>The Souled Store</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="first-header" id="banner">
            <div class="outfit-selection-by-gender">
                <div class="women-section">
                    <button class="women">
                        WOMEN
                    </button>
                </div>
    
                <div class="men-section">
                    <button class="men">
                        MEN
                    </button>
                </div>
    
                <div class="kids-section">
                    <button class="kids">
                        KIDS
                    </button>
                </div>
            </div>
            <div class="support-section">
                <div class="order-tracking-section">
                    <button class="order-tracking-button">
                        TRACK ORDER
                    </button>
                </div>
    
                <div class="contact-us-section">
                    <button class="contact-us-button">
                        CONTACT US
                    </button>
                </div>
    
                <div class="app-download-section">
                    <button class="app-download-button">
                        DOWNLOAD APP
                    </button>
                </div>
            </div>
        </div>

        <div class="mobile-banner">
            <span>
                Download Our App &amp; Get 10% Additional Cashback On All Orders
            </span>

            <button class="app-download-button">
                <span>
                    <!-- phone icon here -->
                </span>
                Open App
            </button>
        </div>
    </body>
</html>

    CSS (this snippet includes only my changes)

    body {
    margin: 0;
}

.app-download-button {
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
    border: 2px solid white;
    border-radius: 5px;
    margin-left: 20px;
    padding-left: 30px; /* placeholder space for phone icon, remove later */
}

.mobile-banner {
    display: none;
    margin: 0;
    height: 50px;
    background-color: red;
    color: white;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    .first-header {
        display: none; /* hides elements with this class */
    }
    
    .mobile-banner {
        display: flex; /* displays elements with this class; flex */
    }
}

    .first-header {
    height: 45px;
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgb(237, 45, 47);
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* column-gap:; */
}

.outfit-selection-by-gender {
    display: flex;
    flex: 1;
    justify-content: start;
}

.women {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.men {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: none;
    padding: 12px 20px 12px 20px;
}

.kids {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.support-section {
    display: flex;
    justify-content: end;
}

.app-download-button {
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
    border: 2px solid white;
    border-radius: 5px;
    margin-left: 20px;
    padding-left: 30px; /* placeholder space for phone icon, remove later */
}

.contact-us-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.order-tracking-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.mobile-banner {
    display: none;
    margin: 0;
    height: 50px;
    background-color: red;
    color: white;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    .first-header {
        display: none;
    }
    
    .mobile-banner {
        display: flex;
    }
}

body {
    margin: 0;
}
    <!DOCTYPE html>
<html>
    <head>
        <title>The Souled Store</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <div class="first-header" id="banner">
            <div class="outfit-selection-by-gender">
                <div class="women-section">
                    <button class="women">
                        WOMEN
                    </button>
                </div>
    
                <div class="men-section">
                    <button class="men">
                        MEN
                    </button>
                </div>
    
                <div class="kids-section">
                    <button class="kids">
                        KIDS
                    </button>
                </div>
            </div>
            <div class="support-section">
                <div class="order-tracking-section">
                    <button class="order-tracking-button">
                        TRACK ORDER
                    </button>
                </div>
    
                <div class="contact-us-section">
                    <button class="contact-us-button">
                        CONTACT US
                    </button>
                </div>
    
                <div class="app-download-section">
                    <button class="app-download-button">
                        DOWNLOAD APP
                    </button>
                </div>
            </div>
        </div>

        <div class="mobile-banner">
            <span>
                Download Our App &amp; Get 10% Additional Cashback On All Orders
            </span>

            <button class="app-download-button">
                <span>
                    <!-- phone icon -->
                </span>
                Open App
            </button>
        </div>
    </body>
</html>
    Login or Signup to reply.
  2. 0

    On my opinion and how I have understand the question is that if you create and html and css if you create heading in side the body with out putting the font-size on you css style sheet the the heading will follow the screen size and example you are creating a mobile design website by using @media so the px you want the screen to be is what makes you header to be more minimum or maximum on you code thank if there is any thing else please ask me

    .first-header {
    height: 45px;
    padding-left: 25%;
    padding-right: 25%;
    padding-top: 0%;
    padding-bottom: 0%;
    background-color: rgb(237, 45, 47);
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* column-gap:; */
}

.outfit-selection-by-gender {
    display: flex;
    flex: 1;
    justify-content: start;
}

.women {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.men {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: none;
    padding: 12px 20px 12px 20px;
}

.kids {
    display: flex;
    flex: 1;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1px;
    border-style: solid;
    border-color: black;
    border-width: 1.5px;
    border-top: 0px;
    border-bottom: 0px;
    padding: 12px 20px 12px 20px;
}

.support-section {
    display: flex;
    justify-content: end;
}

.app-download-button {
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
    border: 2px solid white;
    border-radius: 5px;
    margin-left: 20px;
    padding-left: 30px; /* placeholder space for phone icon, remove later */
}

.contact-us-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.order-tracking-button {
    padding-left: 15px;
    border-style: none;
    background-color: rgb(237, 45, 47);
    color: white;
    font-size: 13px;
}

.mobile-banner {
    display: none;
    margin: 0;
    height: 50px;
    background-color: red;
    color: white;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

@media screen and (max-width: 600px) {
    .first-header {
        display: none;
    }
    
    .mobile-banner {
        display: flex;
    }
}

body {
    margin: 0;
}
    <!DOCTYPE html>
<html>
    <head>
        <title>The Souled Store</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body>
        <div class="first-header" id="banner">
            <div class="outfit-selection-by-gender">
                <div class="women-section">
                    <button class="women">
                        WOMEN
                    </button>
                </div>
    
                <div class="men-section">
                    <button class="men">
                        MEN
                    </button>
                </div>
    
                <div class="kids-section">
                    <button class="kids">
                        KIDS
                    </button>
                </div>
            </div>
            <div class="support-section">
                <div class="order-tracking-section">
                    <button class="order-tracking-button">
                        TRACK ORDER
                    </button>
                </div>
    
                <div class="contact-us-section">
                    <button class="contact-us-button">
                        CONTACT US
                    </button>
                </div>
    
                <div class="app-download-section">
                    <button class="app-download-button">
                        DOWNLOAD APP
                    </button>
                </div>
            </div>
        </div>

        <div class="mobile-banner">
            <span>
                Download Our App &amp; Get 10% Additional Cashback On All Orders
            </span>

            <button class="app-download-button">
                <span>
                    <!-- phone icon -->
                </span>
                Open App
            </button>
        </div>
    </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search