What is the best way to ensure that my <h1> header stays above my <h2> header at all times?

As a novice in web design, I recently took on the challenge of creating my own website. I am a graphic designer and came up with a mock-up of how I envision the site to look. While I managed to complete most parts of it, there's one specific area where I'm struggling – keeping my <h1> header on top of my <h2> header. Currently, they are displayed side by side over a video background that plays on loop. Additionally, I aim to add a horizontal line between these two headers as per my design. Below you'll find snippets of the HTML & CSS codes I've used. For reference, I have also included an image comparing my design with the current state of the website. Any advice or recommended tutorial videos would be greatly appreciated. Thank you in advance.

If anyone has tips for me or knows of some helpful video tutorials, please share them. Thanks!

The H1 & H2 reside within the "Video Section" under the class=section.

CSS Code & HTML

@font-face {
          src: url(fonts/KeepCalm-Medium.ttf);
          font-family: keepcalm;
        }
<!doctype html>
        <html lang="en">
htmlcssheaderpositionalignment

Answer №1

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="testtry.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>testtry</title>  
</head>
<body>

<!--Topbar-->

<div class="topbar">
    <ul class="topbar">
    <img src="Images/phone.png" alt="Call me at" class="phone">
    <li class="topbar topbartext">416-948-2164</li>
    <img src="mail1.png" alt="Email me at" class="mail">
    <li class="hotmail"><a href=""><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="137e7a7072767f723e716667617c7d537b7c677e727a7f3d7072">[email protected]</a></a></li>
</ul>
</div>

<!--Navbar Responsive-->

<div class="Navcontainer">
    <nav class="navbar navbar-expand-lg navbar-light">
          <a href="#"><img src="Logo1.png" alt="Micaela Butron Logo" class="logo"></a>
            <h1 class="logotext">
                    I'm Micaela Butron.
                    <span>an <span>Urban Designer</span>, + Graphic Designer.</span>
            </h1>

          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-lg-auto">
                  <li class="nav-item active"><a class="nav-link active" href="#">Home</a></li>
                  <li class="nav-item active"><a class="nav-link active" href="#">Resume</a></li>
                  <li class="nav-item active"><a class="nav-link active" href="#">Portfolio</a></li>
                    <li class="nav-item active"><a class="nav-link active" href="#">Contact</a></li>
            </ul>
          </div>
    </nav>
</div>


<!--VideoSection-->

<div class="section">
  <div>
        <h1>Micaela <span>Butron</span></h1>
  </div>
  <hr>
  <span class="line"></span>

    <h2>Designer</h2>


    <div class="video-container">
        <video autoplay loop muted>
        <source src="Images/Videos/Video.mp4" type="video/mp4">
    </video>
    </div>
</div>

<!--Bootstrap Javascript Link-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

CSS

     @font-face{
    src: url(fonts/KeepCalm-Medium.ttf);
    font-family: keepcalm;}

    @font-face{
        src: url(fonts/GOTHIC.TTF);
        font-family: centurygothic;}

    body {
        margin: 0px;
        padding: 0px;}

    hr{
      border-top-color: black;
    }
    /**Video Section**/
    .section {
        position: relative;
        text-transform: uppercase;
        width: 100%;
        height: 534px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      flex-direction: column;
    }

    .section h1 {
        text-align: center;
        justify-content: center;    
        height: 108px;
        width:342px;
        font-family: keepcalm;
        font-size:36px;
        color: #000;
        font-weight:500;
        line-height: 60px;
        transform: scale(1.189,1.189);
        letter-spacing: 15px;
        margin: 0px;
        padding: 0px;
        z-index: 1;
      display: block;
      padding-bottom: 150px;
    }
    hr{
      border-top: 1px solid red !important;  
    }


    .section span { font-size: 48px;}

    /* hr {
        display: block;
        z-index: 1;} */

    .section h2{
        width: 181px;
        height: 22px;
        font-family: centurygothic;
        color: #000;
        font-size:35px;
        font-weight: 400;
        letter-spacing: 9px;
        z-index:2;
      display: block;
    }

    .video-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;}

    /*Topbar Section*/
    .topbar {
        margin: 0px;
    }
    .topbar { 
        background-color: #e8e8e8;
        font-family: KeepCalm;
        font-size: 14px;
        align-items:flex-start;
        color: #000000;
        list-style: none;
        text-decoration: none;
        text-align: left;
        padding: 0px 0 0px 70px;}


    .topbar > li {
        display: inline-block;
        padding: 0 20px 0 20px;}

    .topbar > li > a {
        text-decoration: none;
        color: #000000;}

    .phone {
        width:20px;
        padding: 4px 0 0px 4px }

    .mail {
        height: 14px;
        }
    /**Logo Section**/
    .logo{
        float:left;
        padding-bottom: 10px;
        padding-left: 20px;}

    /**Logo Text**/

    .logotext {
        font-size: 14px;
        position: absolute;
        left: 140px;
        font-family: KeepCalm;
        float:left;
        padding-bottom: 10px;
        }

    .logotext span {
        font-size: 14px;
        display: block;
        line-height: 14px;
        font-family: CenturyGothic;
        font-weight: 400;
    }

    .logotext span span {
        font-size: 14px;
        display: inline;
        line-height: 14px;
        font-family: CenturyGothic;
        font-weight: 400;
        background:  #e8e8e8;
    }
    /*Navigation Responsive*/
    .selector-for-some-widget {
        box-sizing: content-box;}

    .nav-item {
        background-color: #fff;
        font-family: KeepCalm;
        font-size: 14px;
        align-items:flex-start;
        color: #000000;
        list-style: none;
        text-align: right;
        padding: 20px 0 20px 0px;}

    .nav-item  {
        display: inline-block;
        padding: 0 20px 0 20px;}

    .nav-item {
        text-decoration: none;
        color: #000000;}

    .navbar-light .navbar-nav .nav-item .nav-link:hover {
        color:  #e8e8e8;}

    /*Topbar & Navigation Responsive*/

    @media (max-width: 768px){
        .logo{
        width:5em;  
        padding-bottom: 1px;
        padding-left: 0px;
        }

        .logotext {
            font-size: 0.7em;
            line-height: 9pt;
            padding-bottom: 1px;
            padding-right: 100px;}

        .logotext span {
            line-height: 9pt;
            font-size: 0.8em;
            }
        .logotext span span {
            background: #FFFFFF;
            font-size: 1em;
            }
        .video-container {display: none;}
    }

    @media (max-width: 580px){
        .mail{width: 0px;}
        .hotmail{font-size: 0px;}
        .video-container {display: none;}
    }

    @media (max-width: 350px){``
        .topbar {font-size: 0px;}
        .phone{ width:0px;}
        .mail {display: 0px;}
        .logotext { font-size: 0px;}
    }

Answer №2

To optimize your website for smaller screens, you can insert the following snippet into your CSS stylesheet specifically targeting screen widths of 991px and below:

@media (max-width: 991px){
    .container {
        flex-direction: column;
    }
    .container h1 {
        height: auto;
        margin-bottom: 20px;
        padding-bottom: 10px;
        position: relative;
    }
    .container h1:after {
        content: '';
        background-color: #FFF;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 120px;
        height: 8px;
        margin: 0 auto;
    }
    .container h2 {
        height: auto;
        width: auto;
    }
}

Answer №3

Link to the code snippet

Here is an example:


    .wrapper{
     text-align:center; 
    }
    <div class="section">
    <div class="wrapper">
      <h1>Michaela Burton</h1>
      <h2> Designer</h2> 
      </div>
    Section continues blah blah blah 
    </div>

To center the H1 and H2 elements, they should be wrapped in another div with the centering styles applied as shown above.

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

Tips for updating the selected value in Vue dynamically

I am currently working on a feature where the months change dynamically based on the selection made using Vue. You can view the code snippet in the link provided below. <div id="app"> <span class="selectboxWrap"> < ...

htmlvue.js

Element remains hidden until the developer console is activated

On my website, I've noticed that certain LayerSlider elements are remaining invisible until: The window is resized I disable the Bookmarks bar in Chrome (quite strange, right?) I switch on the Chrome debugger tools This issue is not exclusive to Ch ...

javascriptjqueryhtmlcssdom

Enhance your existing look by incorporating element.style into your designs

Is there a way to add styles onto an html element without overwriting existing css? element.style { "existing css;" } I'm trying to achieve the following result: element.style { existing css; opacity: 0; pointer-events: none; } But current ...

javascriptcss

Is it possible to define a multiplication margin using css?

I am trying to place a box in the center of a container, but I am unable to set a static height for the parent element as it may change. This is causing issues with aligning the box perfectly in the middle of the page. Any assistance would be greatly app ...

htmlcssangularsasscalc

Unable to retrieve DOM value due to Vue.js template being inaccessible in Chromium, including from both DevTools and extensions

Currently, I’m developing a Chrome extension that needs to retrieve specific values from a webpage such as the item title. However, instead of fetching the actual title, it is reading a Vue.js template variable. Even when I use DevTools to inspect the p ...

javascripthtmlvue.jsdomgoogle-chrome-devtools

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

The JavaScript date picker is malfunctioning in the HTML editor, but it functions properly in Fiddle

I have a working format available in a JS fiddle. Here is the code I have used on my demo site: I created a new folder named "js" and placed datepicker.js inside it, then linked it in my HTML like this: <script type="text/javascript" src="js/datepicke ...

javascriptjqueryhtmlcss

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

javascriptphphtmlmysqlsql

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

I'm trying to figure out the best way to adjust the 'initial-scale' so that my website's width fits perfectly on any device screen when first loaded. Check out my website here: While it looks fine on regular browsers, I had some issue ...

htmlcssmobileviewport

Placing the checkbox label within a fieldset for proper alignment

When creating a registration form, I decided to use the fieldset element to organize the input fields into two rows. Now, I am faced with the challenge of adding a checkbox below them. While I could simply use a div for this purpose, I prefer to incorpora ...

htmlcssformscheckboxfieldset

Extract content from an HTML form within a specific cell using Cheerio

A sample HTML table is displayed below: <tr class="row-class" role="row"> <td>Text1</td> <td> <form method='get' action='http://example.php'> <input type='hidden' ...

javascripthtmlnode.jshtml-tablecheerio

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...

htmlcsstwitter-bootstrapfont-awesome

The HTML page is failing to call the function in the JavaScript application

I recently started taking a YouTube Javascript course on chapter 34 titled "Make start button work" Javascript tutorial My HTML, CSS, and Javascript files are all located in the same folder. I am using VS Code along with the Live Server extension for codi ...

javascripthtmlfunctiononclick

The never-ending scroll feature in Vue.js

For the component of cards in my project, I am trying to implement infinite scrolling with 3 cards per row. Upon reaching the end of the page, I intend to make an API call for the next page and display the subsequent set of cards. Below is my implementatio ...

htmlcsstypescriptvue.jsinfinite-scroll

Utilizing MaterialUI and CSS to craft this stunning box

Looking to create a new MaterialUI component similar to this one: original box Struggling with implementing it using the card component, but so far it looks like: poorly designed box Here's my custom styling using makeStyles: const useStyles = ma ...

cssreactjsmaterial-ui

Extracting Data from HTML Using VBA

I'm attempting to extract the value from the following HTML source code: K<sub>C</sub> [ksi&#8730in]:<br> <input class="test1" type="text" name="fKC" value=""> <br> However, the code I tried using does not seem to ...

htmlvba

Developers specializing in Google Maps navigate to a particular destination

I have been working on an app that provides users with the best options for places to visit, utilizing Google Maps technology. Here is what I have accomplished so far: Show the user their current location Show the user possible destinations (with marker ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

The function Event.preventDefault seems ineffective when attempting to block input of CJK (Korean) characters in a v-text-field of type

Currently, I am tackling an issue in a Vue project where I need to fix a small bug. However, the solution seems quite challenging. I have managed to make the v-text-field accept only numerical input, which is functioning well. <v-text-field type=" ...

javascripthtmlvue.jsvuetify.js

What causes the shift in the position of the div element?

I have been struggling with a problem in my code. Whenever I hover over this element, it rotates as intended but it also changes its position. I can't figure out why this is happening. Can someone please help me debug this? I would greatly appreciate ...

htmlcsstransition