Need Help With Final Touches of Code

Highlighted
Excursionist
26 0 5

I wrote some pretty CSS for one of my pages but it has a few quirks and I'm not sure how to fix them.

1. I needed to use <h6> to get the text I wanted (no big deal) but it comes with some wicked padding, which I cannot seem to get rid of, given that I can't seem to manipulate padding anywhere.  I didn't seem to get anywhere when I tried margin either.  (See also #3.)

2. How do I get my images in without all of the mess that seems to come with adding them in to the text box.  I just want my images, at the size they are, with only the manipulation provided by my CSS, nothing else.

3.  There's that padding issue again.  (See also #1.)

4. My CSS seems to have inadvertently interfered with some of the things on this page, and only this page.  Links are now in blue, and are underlined twice when hovered.

Code Quirks.jpg

I am also including my complete code, in case it's something that will only make sense that way.  (Thankfully there isn't that much of it.)

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <!-- CSS Stylesheets -->
<link rel="stylesheet" href="Covid-19 Stylesheet.css">

  <!-- CSS Stylesheets -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="css/styles.css">

  <!-- Bootstrap Scripts -->
  <!--Complete CSS-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </script>
  <!--Complete JavaScript-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!--Complete JavaScript Bundle-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
</head>

<body>
  <!-- ThankYou-->
  <div class="ThankYou">
    <h2 style="text-align: center;"> To those who supported Shoes On Solano during this unprecedented time:
      <em> THANK YOU! </em></h2>

    <h6  style="text-align: center;"> You made it possible
      for us to
      continue to serve your footwear needs! </h6>

    <h6 style="text-align: center;"> Since the beginning of this health crisis, our priority has been the safety of our customers and our associates. </h6>

    <h6 style="text-align: center;"> Now we must all adapt to the“ New Normal”.  We look forward to showing you our new Summer styles, in person! </h6>
  </div>

  <!-- SaferStore -->
  <div class="SaferStore">
    <h1 style="text-align: center;"> A safer in-store shopping experience </h1>

    <h3 style="text-align: center;"> We’ re taking precautions every day to keep you and our associates safe: </h3>
  </div>

  <!-- TopGrid -->
  <section id="TopGrid">
    <div class="container">
      <div class="row">

        <div class="TopGrid-Box col-lg-4">
          <img class="Mask" src="Images\Mask Icon.jpg" alt="Lineart Face Mask">
          <h2 style="text-align: center;">Masks</h2>
          <h6>Our associates will be wearing masks, and you will be asked to do the same while shopping in our stores. </h6>
        </div>

        <div class="TopGrid-Box col-lg-4">
          <img class="Hands" src="Images\Hand Cleaning Icon.jpg" alt="Lineart Hand Sanitizer">
          <h2 style="text-align: center;"> Hands</h2>
          <h6>Hand sanitizer will be provided as you enter so we can maintain safer shoe displays. Our asociates will also be regularly using sanitizer as well as washing their hands
            throughout the day.</h6>
        </div>

        <div class="TopGrid-Box col-lg-4">
          <img class="Surface" src="Images\Surface Cleaning Icon.jpg" alt="Lineart Cleaning Spray">
          <h2 style="text-align: center;"> Surfaces</h2>
          <h6>Our associates will be disinfecting all high-touch surfaces throughout the day, as well as before and after customers.</h6>
        </div>

      </div>
    </div>
  </section>

  <!-- MidGrid-->
  <section id="MidGrid">
    <div class="container">
      <div class="row">

        <div class="MidGrid-Box col-lg-4">
          <img class="Distancing" src="Images\Distance Icon.jpg" alt="Lineart People Distancing">
          <h2 style="text-align: center;"> Physical Distancing</h2>
          <h6>We will be limiting the number of customers who can enter our stores at one time, allowing everyone to keep a safe distance from one another and our associates.</h6>
        </div>

        <div class="MidGrid-Box col-lg-4">
          <img class="Shoe" src="Images\Shoe Icon.jpg" alt="Lineart Platform Heel">
          <h2 style="text-align: center;">Shoes</h2>
          <h6>Shoes will be UV disinfected after each try on and before being restocked, for your peace of mind.</h6>
        </div>

        <div class="MidGrid-Box col-lg-4">
          <img class="Contactless" src="Images\Contactless Icon.jpg" alt="Lineart Contactless Reader">
          <h2 style="text-align: center;"> Contactless Check Out</h2>
          <h6>Our credit card machines have touch-free capabilities for those of you with cards and phones that support this feature. We will not be able to accept cash or checks at this time.</h6>
        </div>

      </div>
    </div>
  </section>

  <!-- BottomGrid -->
  <section id="BottomGrid">
    <div class="container">
      <div class="row">

        <div class="BottomGrid-Box col-lg-2">
        </div>

        <div class="BottomGrid-Box col-lg-4">
          <img class="Online" src="Images\Online Icon.jpg" alt="Lineart Computer">
          <h2 style="text-align: center;"> Online</h2>
          <h6>Shop on our website; get in-store style customer service by phone or email! </h6>
        </div>

        <div class="BottomGrid-Box col-lg-4">
          <img class="Phone" src="Images\Phone Icon.jpg" alt="Lineart Phone">
          <h2 style="text-align: center;"> By Phone</h2>
          <h6>Shop by Phone Appointment and pick up in the store, limiting the time you have to spend in the store.</h6>
        </div>

          <div class="BottomGrid-Box col-lg-2">
          </div>

        </div>
      </div>
</body>

</html>

CSS

/*ThankYou*/
.ThankYou{
  padding-bottom: 2em;
}

/*SaferStore*/
.SaferStore {
  padding-bottom: 25px;
}

/*TopGrid*/
.TopGrid-Box {
  text-align: center;
  padding-bottom: 25px;
}

.Mask {
  width: 55%;
}

.Hands {
  width: 55%;
}

.Surface {
  width: 55%;
}

/*MidGrid*/
.MidGrid-Box {
  text-align: center;
  padding-bottom: 25px;
}

.Distancing {
  width: 55%;
}

.Shoe {
  width: 55%;
}

.Contactless {
  width: 55%;
}

/*BottomGrid*/
.BottomGrid-Box {
  text-align: center;
}

.Online {
  width: 45%;
}

.Phone {
  width: 45%;
}

Thanks for the help everyone.

0 Likes