CODEWITHSUNDEEP
htmlcss
Yuvanesh Anand
Yuvanesh Anand

Reputation: 81

How do i make the text go under the image in mobile?

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

      amp-carousel {
        padding-top: 20em;
      }

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

      amp-carousel {
        top: 0em;
        padding-bottom: 5em;
      }

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

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

      .clearfix {
        overflow: auto;
        display: flex;
        padding-bottom: 5em;
      }

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


    <amp-carousel
      layout="fixed-height"
      type="slides"
      height="900"
      width="auto"
      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/6H2AFQm.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/6jOfwYY.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/AFq0mSz.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/7tMi95w.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-img
        src="https://i.imgur.com/G020qk3.png"
        width="1280"
        height="720"
      ></amp-img>
      <amp-video
        layout="fixed"
        autoplay
        loop
        width="1280"
        height="720"
        poster="https://i.imgur.com/lNFDJb1.png"
      >
        <source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
        <div fallback>
          <p>This browser does not support this video element.</p>
        </div>
      </amp-video>
    </amp-carousel>

    <div class="content">
      <h1 class="Centered">
        Providing solutions for all your surface treatments
      </h1>

      <div class="clearfix">
        <div>
          <p class="left">
            Reliant Industrial Supply provides solutions for all your surface
            treatments.Our supplier sia Coated Abrasives, the oldest abrasive
            manufacturer in the world, brings one of the best abrasives on the
            market. We supply Flex Trim brushes for all liner and carousel
            sanding needs. We provide AirVantage Sanders and Coilhose
            Pneumatics, for when you want the best quality handsanding tools and
            results. When it comes to machines, we have one of the best and also
            one of the most experienced machinery manufacturers, Timesavers Wide
            Belt Sanders. For cutting and shaping we have a wide variety of
            Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
            sanding, you can rely on Reliant. We provide solutions for surface
            preparation through complete sanding systems which include coated
            abrasives, pneumatic sanders and machinery.
          </p>
        </div>

        <div>
          <img class="right" src="https://i.imgur.com/u8hDnzX.jpg" layout="responsive" width="800px;" height="300px;"/>
        </div>
      </div>
      <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>

Hey All!

If you run this code, it looks good and usable on desktop. But as soon as you decrease the viewport width to simulate mobile, the paragraph looks janky. All I want to do is put the text under the image for mobile only. I understand that your just supposed to put the different css above the media query, but I do not know how to proceed to do that as I don't know how to make it ignore the css that allows the image and the text to be inline on the desktop on the mobile side. Thank you for helping me out!

Upvotes: 0

Views: 876

Answers (2)

Chuong Tran
Chuong Tran

Reputation: 360

This is my solution:

@media only screen and (max-width: 768px) {
  .clearfix {
    flex-flow: column;
  }
  .clearfix > div {
    order: 1;
  }
  .clearfix > div:first-child {
    order: 2;
  }
}

Upvotes: 1

Mehul
Mehul

Reputation: 216

To hide the paragraph in mobile viewport, you can add the following code block in the css-

@media only screen and (max-width: 768px) {
  .left {
    display: none;
  }
}

It basically tells the browser that if the screen width is between 0px - 768px(which is the typical width of a mobile screen), then you should not render the < p > tag. In other words, all devices with a screen width of 768px or less, just ignore the < p > tag in html like it doesn't even exist!

Hope it helps! comment if it doesn't work or you need any clarifications.

Upvotes: 1

Related Questions