CODEWITHSUNDEEP
htmlcss
Yuvanesh Anand
Yuvanesh Anand

Reputation: 81

My Footer on mobile gets cut off the page

<!DOCTYPE html>
<html amp lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Reliant Industrial Supply</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link
      rel="canonical"
      href="https://http://www.reliantindustrialsupply.com/"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
    />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1,initial-scale=1"
    />
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": ["logo.jpg"]
      }
    </script>
    <style amp-boilerplate>
      body {
        -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
        animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      }
      @-webkit-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-moz-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-ms-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @-o-keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
      @keyframes -amp-start {
        from {
          visibility: hidden;
        }
        to {
          visibility: visible;
        }
      }
    </style>
    <noscript
      ><style amp-boilerplate>
        body {
          -webkit-animation: none;
          -moz-animation: none;
          -ms-animation: none;
          animation: none;
        }
      </style></noscript
    >

    <style amp-custom>
      :root {
        --background: rgba(299, 299, 299, 0.95);
      }

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        font-family: "Work Sans";
      }

      /* navigation styles start here */

      .header {
        background: var(--background);
        text-align: center;
        position: fixed;
        z-index: 999;
        width: 100%;
      }

      .nav-toggle {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }

      .nav-toggle:focus ~ .nav-toggle-label {
        outline: 3px solid rgba(lightblue, 0.75);
      }

      .nav-toggle-label {
        position: absolute;
        top: 0;
        left: 0;
        margin-left: 1em;
        height: 100%;
        display: flex;
        align-items: center;
      }

      .nav-toggle-label span,
      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        display: block;
        background: black;
        height: 2px;
        width: 2em;
        border-radius: 2px;
        position: relative;
      }

      .nav-toggle-label span::before,
      .nav-toggle-label span::after {
        content: "";
        position: absolute;
      }

      .nav-toggle-label span::before {
        bottom: 7px;
      }

      .nav-toggle-label span::after {
        top: 7px;
      }

      nav {
        position: absolute;
        text-align: left;
        top: 100%;
        left: 0;
        background: var(--background);
        width: 100%;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 400ms ease-in-out;
      }

      nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      nav li {
        margin-bottom: 1em;
        margin-left: 1em;
      }

      nav a {
        color: black;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
      }

      nav a:hover {
        color: #000;
      }

      .nav-toggle:checked ~ nav {
        transform: scale(1, 1);
      }

      .nav-toggle:checked ~ nav a {
        opacity: 1;
        transition: opacity 250ms ease-in-out 250ms;
      }


      @media screen and (min-width: 800px) {
        .nav-toggle-label {
          display: none;
        }

        .header {
          display: grid;
          grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
        }

        .logo {
          grid-column: 2 / 3;
        }

        nav {
          position: relative;
          text-align: left;
          transition: none;
          transform: scale(1, 1);
          background: none;
          top: initial;
          left: initial;

          grid-column: 3 / 4;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        nav ul {
          display: flex;
        }

        nav li {
          margin-left: 3em;
          margin-bottom: 0;
        }

        nav a {
          opacity: 1;
          position: relative;
        }

        nav a::before {
          content: "";
          display: block;
          height: 5px;
          background: black;
          position: absolute;
          top: -0.75em;
          left: 0;
          right: 0;
          transform: scale(0, 1);
          transition: transform ease-in-out 250ms;
        }

        nav a:hover::before {
          transform: scale(1, 1);
        }
      }


      .content {
        background-color: dark-grey;
      }
      .Centered {
        text-align: center;
        font-family: "Work Sans";
        font-style: normal;
        font-weight: 300;
      }

      .left {
        margin: 2rem;
        font-family: 'Sora', sans-serif;
        font-style: normal;
        font-weight: 300;
      }

      .clearfix {
        overflow: auto;
        display: flex;
      }

      .footer {
          width: 100vw;
          display: block;
          overflow: hidden;
          padding: 20px 0;
          box-sizing: border-box;
          background-color: #18181a;
      }

      .innerFooter {
          display: block;
          margin: 0 auto;
          width: 1100px;
          height: 100%;
      }

      .innerFooter .logoContainer {
        width: 35%;
        float: left;
        height: 100%;
        display: block;
      }

      .innerFooter .footerThird {
        padding-left: 20px;
        width: calc(21.66666667 - 20px);
        margin-right: 10px;
        float: left;
        height: 100%;
      }

      .innerFooter .footerThird:last-child {
        margin-right: 0;

      }

      .innerFooter .footerThird h1{
        font-family: 'Work Sans';
        font-size: 22px;
        color: white;
        display: block;
        width: 100%;
        margin-bottom: 20px;
      }

      .innerFooter span {
        font-family: 'Work Sans';
        font-size: 12px;
        color: white;
      }

    </style>

    <script
      async
      custom-element="amp-carousel"
      src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
    ></script>
    <script
      async
      custom-element="amp-video"
      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
    ></script>
  </head>
  <body>
    <div class="header">
      <amp-img
      src="https://i.imgur.com/vPr7fdQ.png"
      width="175px"
      height="50px"
      ></amp-img>
      <input type="checkbox" id="nav-toggle" class="nav-toggle" />
      <nav>
        <ul>
          <li>
            <a
              href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
              >Home</a
            >
          </li>
          <li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
          <li>
            <a
              href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
              >Contact</a
            >
          </li>
        </ul>
      </nav>
      <label for="nav-toggle" class="nav-toggle-label">
        <span></span>
      </label>
    </div>



    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><br></p>
    <p style="text-align: center;"><span style="font-size: 46px;">Products</span></p>

    <amp-carousel
      layout="responsive"
      type="slides"
      height="720"
      width="1280"
      controls
      loop
      autoplay
      delay="3000"
      data-next-button-aria-label="Go to next slide"
      data-previous-button-aria-label="Go to previous slide"
    >
      <amp-img
        src="https://i.imgur.com/VjNbHoD.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/CFw62Qo.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/DSFCYpd.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/i2gLNZD.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/wxkmAop.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/x1s8gJs.png"
        width="1280"
        height="720"
      ></amp-img>
    </amp-carousel>

     <p style="text-align: center;"><span style="font-size: 46px;">Manufacturers</span></p>
<p style="text-align: center;"><br></p>
<table style="width: 100%; border-collapse: collapse; margin: 0px auto; border: groove;">
    <tbody>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><strong>Manufacturers</strong></div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><strong>Website</strong></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Sia Abrasives</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="https://www.siaabrasives.com/us/en/home/">https://www.siaabrasives.com/us/en/home/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Time Savers</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.timesaversinc.com/content/wood-sanders">http://www.timesaversinc.com/content/wood-sanders</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">AirVANTAGE Tools</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.airvantagetools.com/">http://www.airvantagetools.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Coilhose Pneumatics</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.coilhose.com/">http://www.coilhose.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">EAB Tools</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.exchangeablade.com/">http://www.exchangeablade.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Flex Trim Abrasives</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.flex-trim.com/">http://www.flex-trim.com/</a></div>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;">Larick Machinery</div>
            </td>
            <td style="width: 50%; border: groove;">
                <div style="text-align: center;"><a href="http://www.larickmachinery.com/">http://www.larickmachinery.com/</a></div>
            </td>
        </tr>
    </tbody>
</table>

    <div class="footer">
      <div class="innerFooter">
        <div class="logoContainer">
          <amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
        </div>

        <div class="footerThird">
          <h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
          <h1>Phone Number:  (714) 287-6815 </h1>
        </div>

        <div class="footerThird">
          <span>Copyright 2020 Reliant Industrial Supply<span>
        </div>
    </div>
  </div>
  </body>
</html>

As the title refers, my footer when less than 768px vw width(mobile), The footer just runs off the edge and I've tried changing the padding between the image and the text and it does not change. I know this script is huge but it is kind of need to show what the footer would look like, if you don't mind putting this into a editor. It would be greatly appreciated if you could help me out!

Upvotes: 1

Views: 562

Answers (1)

Cornel Raiu
Cornel Raiu

Reputation: 2995

The easiest thing you can do is apply display: flex to the .footer class.

Also, you should look into ways of doing that table without actually using tables. That would give the table a much better responsive look and feel.

Upvotes: 1

Related Questions