Having trouble getting Material Design Lite to function properly on my site

I'm having trouble with my HTML template that incorporates Google Material Design Lite. The header is working fine, but anything I add below it just moves to the top. Can someone take a look at the code and offer some assistance?

.demo-layout-transparent {
  background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center / cover;
  font-family: 'League Spartan';
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 3em;
    margin-top: 1em;
}

.subtitle {
    font-family: "League Spartan";
    font-size: 4em;
    color: floralwhite;
    text-align: center;
    margin-top: 2em;
}

.subtitle span{
    color: deepskyblue;
}
 <!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
    <link rel="stylesheet" href="main.css">
</head>

    
    
<body>
    <div class="home">
 <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
     <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">DesignAmbition</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation -->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Home</a>
        <a class="mdl-navigation__link" href="">About</a>
        <a class="mdl-navigation__link" href="">Portfolio</a>
        <a class="mdl-navigation__link" href="">Contact</a>
      </nav>
    </div>
  </header>
     <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1>
  <div class="mdl-layout__drawer mdl-layout--small-screen-only">
    <span class="mdl-layout-title">Design <br/> Ambition`</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="">Home</a>
      <a class="mdl-navigation__link" href="">About</a>
      <a class="mdl-navigation__link" href="">Portfolio</a>
      <a class="mdl-navigation__link" href="">Contact</a>
    </nav>
  </div>
  <main class="mdl-layout__content">
  </main>
     
     </div>
    </div>
    
    
<div class="mdl-layout__content">
        <h1> ABOUT </h1>
    </div>
  </body>
</html>

htmlcssmaterial-designmaterial-design-lite

Answer №1

Ensure your content is within a <div class="page-content"> element.
Update: The header on your page was transparent, so I removed the --transparent property from the Header class to give it some color. Additionally, I adjusted the margin-top size to 5px (previously 3em, which was too large for the header) and changed the font size of the Header title to 2em from 3em. I also eliminated the <div class="home"> as it was not being used.

.demo-layout-transparent {
  background: url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=db130336e8134fc3f734dbc4318f5c5e') center / cover;
  font-family: 'League Spartan';
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
  color: white;
}

.mdl-layout-title {
    font-family: 'League Spartan';
    font-size: 2em;
    margin-top: 5px;
}

.subtitle {

    font-size: 4em;
    color: floralwhite;
    text-align: center;
    margin-top: 2em;
}

.subtitle span{
    color: deepskyblue;
}
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
  <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="demo-layout-transparent mdl-layout mdl-js-layout" id="header">
      <header class="mdl-layout__header mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Design Ambition</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation -->
          <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Home</a>
            <a class="mdl-navigation__link" href="">About</a>
            <a class="mdl-navigation__link" href="">Portfolio</a>
            <a class="mdl-navigation__link" href="">Contact</a>
          </nav>
        </div>
      </header>

      <div class="mdl-layout__drawer mdl-layout--small-screen-only">

        <span class="mdl-layout-title">Design <br/> Ambition`</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Home</a>
          <a class="mdl-navigation__link" href="">About</a>
          <a class="mdl-navigation__link" href="">Portfolio</a>
          <a class="mdl-navigation__link" href="">Contact</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content">
          <!-- contents starts here -->

          <h1 class="subtitle">We Create <span>DESIGNS</span> <br/> And People Just <br/>.......... <br/> <span>ADMIRE</span> </h1>
          <h1>About</h1>

          <!-- contents ends here -->
        </div>
      </main>
    </div>
</body>

Answer №2

Uncertain about the objective, consider placing your content within the main element.

<main class="mdl-layout__content">
  <div class="page-content"><!-- Insert your content here --></div>
</main>

You can also place it in an additional header element.

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

Issue with Jquery toggle functionality only affecting a single div

Is there a way to make a div display one of two images depending on which div the user hovers over? The code provided below works for hovering over #FH_Blurb, but does not work for hovering over #HDS_Blurb. Could you explain why this is happening? Both im ...

javascriptjqueryhtml

Create a visually appealing layout with two images positioned side by side using Bootstrap

Currently, I am working with a code snippet that displays two images, each approximately 350px wide. These images are being shown in a sidebar that is set at 400px wide on desktop and tablet screens (col-lg, col-md, col-sm), but expands to 100% width on a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

I'd like to display just two names from a list at a time and have the option to click on a button to reveal the next two names, unfortunately, there

I am trying to modify my code so that it only displays the first 2 items in an array initially, and then on clicking a button, the next 2 names are displayed until the end. However, the code I have written seems to have a bug. Can you help me correct this ...

htmlcssknockout.js

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

My current challenge involves sending a combination of name and description text data alongside a video file. Unfortunately, I've encountered an issue where I can only send either the video or the text, but not both simultaneously. Below is the code ...

javascripthtmlnode.jsexpresspost

Secure your accounts with our innovative password manager tool that allows you to easily create, manage

Is there a way to show text in dots format using HTML, similar to how it appears in a password field, like this: Password: <input type="password" name="pwd">This text looks like dots</input> Without relying on an <input>? I'm inter ...

javascriptjqueryhtmlcssredaction

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Experiencing the error message "Unable to access property 'innerHTML' of null" despite initializing the corresponding ID

After doing some research, I discovered that this issue usually arises when the specific div is not loaded yet or simply does not exist. My code is set to loop continuously, ensuring that even if it wasn't fully loaded the first time, it will be by th ...

javascripthtml

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Is there a way to decrease the gutter-width in Bootstrap 3? Since Bootstrap uses a 12-grids system, using col-sm-* creates a gap between elements of around 30px (15px on each side of the grid-column). However, my theme requires less space between columns ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Having trouble with implementing the .addclass function in a dice roller project

I'm looking to have the element with id=die load initially, and then on a button click event labeled "click me," apply the corresponding CSS class such as 'die1,' 'die2,' and so forth. function roll() { var die = Math.floor(Ma ...

javascriptjqueryhtmlcss

Ways to deactivate a button using CSS

I need to use Javascript to disable a link based on its id. By default, the link is invisible. I will only enable the link when the specific id value comes from the backend. HTML <li id="viewroleId" style="display: none;"> <a href="viewrole" ...

javascripthtmlcssangularjs

Unable to click on links due to issues with the CSS and HTML

On my page at , there are links on the right side that I am unable to click. Does anyone know why this might be happening? Content on the Left Side: <nav class="woocommerce-breadcrumb" itemprop="breadcrumb"><a class="home" href="http://artendije ...

htmlcsshyperlinkz-index

Positioning of background images

My goal is to display a full background image on a website, ensuring that the bottom of the image aligns with the bottom of the browser window without any cropping. I want the image to be positioned at the bottom left corner, cutting off anything above o ...

htmlcssimagebackground

Modifying the font style of text within an HTML string using SQL Server

I need to standardize font sizes in my database where strings are stored as html and users can modify the font size. However, for generating reports, I require all font sizes to be consistent. If I have the following html code, how can I change the font si ...

htmlsql-serversql-server-2008user-defined-functions

What is causing the cards to overlap on a tablet-sized screen?

Is anyone else experiencing issues with bootstrap cards overlapping on tablet views? I had to adjust the height and width in the HTML code as opposed to CSS. Check out my HTML code below: <div class="container"> <div class="update& ...

htmlcssbootstrap-5

What is the best way to implement automatic color changing in PHP code?

I have a MySQL table called 'contact number' that contains the field 'c_n'. I need to display data from this field and change the color based on the length of the value. If the field's value is less or more than 11 digits, the colo ...

phphtmlcss

Appending a row to a table will not trigger events in Select2

Despite several attempts, I can't seem to get the select2:select event working on dynamically added rows in a table using select2. The event only works on the original row. Unfortunately, I don't have any additional details about this issue. COD ...

javascriptjqueryhtmllaraveljquery-select2

Placing a piece of code within a table without any empty spaces

When including a preformatted code fragment with multiple lines and indentation, the HTML element to use is <pre>. However, I've noticed that when I place this within a table, the browser automatically adds a blank line before and after the code ...

htmlcsslayout

Experimenting with animating a snackbar in Svelte by incorporating distinct animations for its entrance and exit effects

My current objective is to create a snackbar component with a Material-esque design that will emerge from the bottom of the screen and blur out once dismissed. Here is my current implementation: <script lang="ts"> import '../css/sn ...

javascriptcsstypescriptsveltesveltekit