Question posted in 
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;
}
2
Answers
Your HTML needs to have the viewport meta tag.
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 offirst-header.HTML
CSS (this snippet includes only my changes)
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