Is it possible to utilize CSS to alter the header content when the window is minimized?

I am currently experimenting with replicating a website design from a popular clothing brand to enhance my knowledge of HTML and CSS. I am curious to know if it is possible to modify the header content when the window size is reduced, either through CSS alone or if JavaScript will be required.

In full-screen mode, you can observe two distinct sections: category and support
However, in a minimized view, the header displays as: Download the app

After searching online without success, I have decided to seek answers here. Below is the code that I have been working with:

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

Answer №1

Make sure to incorporate the viewport meta tag in your HTML.

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

By using CSS exclusively, I utilized a media query to switch the display of HTML elements. For screen widths below 600px, the mobile-banner will be visible while hiding the element with the first-header class.

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

Answer №2

In my opinion, and from how I understand the question, if you create an HTML and CSS document without specifying a font-size in your CSS stylesheet for headings within the body, the heading will adjust to the screen size. For example, when designing a mobile website layout using @media queries, the specified pixel value determines whether your header will be minimal or maximal in your code. Thank you, and feel free to ask if you have any further questions.

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

.outfit-selection-by-gender {
    display: flex;
    flex: 1;
    justify-content: start;
}
... (CSS continues)
HTML Code: 
<!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">
            ... (HTML snippet continues)
        </div>
        <div class="mobile-banner">
           ... (More HTML code here)
        </div>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjust Scale to Less than 1 in JVectorMap

I am in the process of developing a website that includes a full-size map using JVectorMap. The map currently occupies 100% of the width and height of the page, but I would like to add a border around it when fully zoomed out. However, when the map is zoom ...

javascriptjqueryhtmlcssjvectormap

DataTables.js, the powerful JavaScript library for creating interactive tables, and its compatible counterpart

I'm currently making some changes to a dynamic table that require enabling a vertical scroll bar. As a result, I need to implement this vertical scroll bar mechanism on an existing table. The code in our project utilizes dataTables.js version 1.5.2 ...

javascriptjqueryhtmlcss

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

In the process of developing an API using the next.js app router, I encountered an issue. Specifically, I was successful in parsing the data with const res = await request.json() when the HTTP request type was set to post. However, I am facing difficulties ...

javascripttypescriptnext.jsnext.js13

Employing double quotes within JSON keys or values can help enhance the readability and

Is there a way to include double quotes within my JSON data? I've been struggling with this issue. Below is the example of my JSON: "I": { "1: Vehicle Control:M": { "D2": { "VM": "3300.00", "VSD": ...

javascriptjson

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

cssangulartypescriptnpmuikit

Sending numerous arguments via HTTP DELETE request

In my code, I am trying to send the id and dept fields in a DELETE HTTP request and then retrieve them inside the deleteData() function. However, I am encountering an issue where the values for id and dept are coming up as null within the deleteData() fu ...

javascriptangularjs

"XMLHttpRequest 206 Partial Content: Understanding the Importance of Partial

I need help with making a partial content request using an XMLHttpRequest object in JavaScript. Currently, I am trying to load a large binary file from the server and want to stream it similar to how HTML5 video is handled. While setting the Range header ...

javascriptajaxxmlhttprequest

Ways to create interactive multiple dropdown menu using vue-multiselect

I'm not sure if it's possible to achieve what I want with Vue for a specific component by changing its data and automatically loading it. Below is my expectation (tried in jQuery) var data = {country:{type:'dropdown',values:[' ...

javascriptvue.jsvuejs3vue-multiselect

Is it possible for AngularJS to detect $locationChangeSuccess when the page is refreshed?

In my Angular project, I have set up event listener for $locationChangeSuccess using the following code: $scope.$on('$locationChangeSuccess', function(event) { console.log('Check, 1, 2!'); }); While this works perfectly when navigat ...

javascriptangularjs

Steps to correct color gradient on a fixed top navigation bar:

In my Bootstrap 4 project, I have a fixed navbar with a linear gradient background image. The navbar is transparent and fixed, but as I scroll down the page, the gradient disappears. Can anyone help me figure out how to keep the background image visible wh ...

cssbootstrap-4navbartransparentlinear-gradients

Prevent the clustering of advertisements using jQuery

Check out my code in action here! jQuery(document).ready(function(){ var insertionTemplate = jQuery(".hiddenAdBox").eq(0).html(), insertionTarget = jQuery('ul'), insertionTargetChildren = insertionTarget.find('li'), ...

javascriptjqueryhtmlcssads

Filter search results using selected region from dropdown menu

I have been attempting to retrieve the value from a dropdown list and customize the search functionality specifically for the selected field. The client should only be able to search within the chosen zone in the dropdown. I have been searching for a solut ...

javascriptc#asp.net.netasp.net-mvc-5

Guidelines for incorporating a router into the title of a Vuetify.js toolbar

I am currently utilizing vuetify.js in my project and I encountered an issue. I wanted the application title to link to the top menu, but when navigating to /route shop and /discount, the HogeHoge button's state changed unexpectedly. Is there a soluti ...

javascriptvue.jstoolbarvuetify.js

Is there a way to transfer table row data to another table by simply clicking on the corresponding checkbox in the same row?

I'm working with a table that includes 4 fields: service, amount, tax, and action. My challenge is to have the data from any row in the first table added to a second table when its checkbox is selected. The second table should have the same fields a ...

javascriptjqueryhtml

The PHP application encountered an error when trying to use an object of the mysqli_result type as an array

In my section, I have a straightforward display of data sourced from the database. Upon clicking options like construction and selecting countries like Algeria, the displayed values are [251, 211,712]. Similarly, for selections like Power in Egypt, the ou ...

javascriptphpjquerymysqlajax

Verification of three-dimensional password format with the use of AngularJS

I am trying to implement password validation in Angular.js that requires a combination of alphabetical, numerical, one upper case letter, one special character, no spaces, and a minimum length of 8 characters. How can I achieve this using Angular.js? Here ...

javascriptangularjsformsvalidation

Issue: Unable to locate 'path' in directory 'C:workdemo ode_modulesmime-types'

Encountering an error after updating from "react-scripts": "4.0.3" to "react-scripts": "5.0.1",. I need assistance with understanding why this error is occurring and how to resolve it... ERROR in ./node_modules/mime ...

javascriptreactjsnpm

JavaScript button click changes the selected row's color in a DataTable

I am looking to dynamically change the color of a row in my Datatable when a specific button is clicked. Here is the HTML code snippet for the rows: <tr role="row" class="odd"></tr> <tr role="row" class="even selected"></tr> & ...

javascripthtmlcssdatatable

Unable to retrieve event data and integrate it into HTML using jQuery

Just starting out with leaflet and JavaScript, jQuery. I've got an index.html page displaying a map, and want to show the coordinates of the mouse pointer underneath the map when it moves. To achieve this, I have a div element with the id "coordinat ...

javascriptjqueryeventsleafletjquery-events

Fixed navigation bar at the top of the page

After implementing code found at this source to create a sticky navigation bar at the top of my webpage, I encountered an issue. When I tried adding my actual navigation content into the navbar, it appeared about 20 pixels below the top and then snapped ba ...

jqueryhtmlcss