Kliknięcie Sprawdź w Google Chrome. Kiedy przewijam stronę w opcji „Toggle Device Toolbar”. Mój Jumbotron i Stopka nie rozciągają się na całą szerokość ekranu telefonu. Mam kod przesłany do CodePen.io, abyś mógł go obejrzeć. Link znajduje się poniżej. Zauważyłem również, że podczas sprawdzania tagu body w html, pokazuje mi dokładnie, gdzie występuje odcięcie.

CodePen.io 
https://codepen.io/alexbritoofficial/pen/MWYpbRg
0
alexbrito1993 19 grudzień 2019, 22:12

1 odpowiedź

Dzieje się tak, ponieważ klasa row ma margin-left:-15px & margin-right:-15px, która znajduje się tuż pod klasą w-100, która ma width:100! important; Wprowadziłem zmiany w 2 instancjach poniżej:

  • Instancja1: możesz usunąć row, ponieważ nie korzystasz z col-** klas
  • Instancja2: ponieważ masz pod nią col-** klasy, dodajesz container-fluid wokół niej, aby row nie wychodziło z widoku ekranu
body {
  height: 100%;
  background-color: #fccd4d;
}

.myNavbar {
  background-color: black;
}

.jumbotron {
  background-image: url("/Project/img/Unknown.png");
  height: 400px;
  background-size: 100% 100%;
  margin: inherit;
}


/* Navigaton Bar List Items CSS */

.menuItems {
  white-space: nowrap;
}

.listItem {
  padding-left: 30px;
  padding-right: 30px;
}

.listItemText {
  font-family: "Calistoga", cursive;
  color: white;
  white-space: nowrap;
  display: inline-block;
  font-size: 18.2px;
}

.listItemText:hover {
  color: white;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  font-family: "Calistoga", cursive;
}

.dropdown-content a:hover {
  background-color: #bd3f055b;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.hrSeperator {
  border-color: black;
}

.divSpacer1 {
  height: 10px;
}

.appetizersH1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: bold;
  color: black;
}

.container {
  padding-top: 50px;
}

.main-container {
  padding-top: 10px;
}


/* Menu Choice Item Styling */

.menuChoiceItem {
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 30px;
  font-weight: bold;
  color: black;
}

.footerContainer {
  justify-content: space-between;
  height: 300px;
  background-color: black;
  margin: inherit;
  display: flex;
}

.coastCafeFooterH1 {
  white-space: nowrap;
  font-family: "Girassol", cursive;
  color: white;
}

.coastCafeFooterParagraph {
  white-space: nowrap;
  font-family: "Girassol", cursive;
  color: white;
}

.plate-identifier {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
}

blockquote .menu-item-h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: black;
  font-weight: bold;
}

.appetizer-description {
  color: black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Gelasio|Girassol&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="CSS/menuCSS.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, intial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- ------------------------------------------------------------------------------ -->
<!-- Navigation Bar -->

<div class="w-100">
  <div class=""> <!-- instance1 -->
    <nav class="navbar myNavbar navbar-expand-lg navbar-collapse w-100 fixed-top">
      <button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target" style="
        background-color: yellow;">
          <span
            class="navbar-toggler-icon"
          ></span>
        </button>
      <a class="navbar-brand"><img class="img-fluid" src="img/CoastCafeLogoNavIcon.png" /></a>
      <span class="navbar-text listItemText"> </span>
      <div class="collapse navbar-collapse justify-content-center" id="collapse_target">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a href="index.html" class="nav-link font-weight-bold listItemText" href="index.html"><i class="fa fa-home"></i> Home</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold listItemText" href="#"
                >Our Story</a
              >
            </li>
            <li class="nav-item listItemText">
              <div class="dropdown">
                <a class="nav-link font-weight-bold listItemText">Our Menu</a>
            <div class="dropdown-content">
              <a href="appetizers.html" class="menuItems">Appetizers</a>
              <a href="combinationPlates.html" class="menuItems">Combination Plates</a
                  >
                  <a href="coastSpecialties.html" class="menuItems"
                    >Coast Specialties</a
                  >
                  <a href="chickenBoxes.html" class="menuItems"
                    >Chicken Boxes</a
                  >
                  <a href="classicSandwiches.html" class="menuItems"
                    >Classic Sandwiches</a
                  >
                  <a href="signatureSides.html" class="menuItems"
                    >Signature Sides</a
                  >
                  <a href="homemadeDesserts.html" class="menuItems"
                    >Homemade Desserts</a
                  >
                </div>
              </div>
            </li>
            <li class="nav-item">
              <div class="dropdown">
                <a class="nav-link font-weight-bold listItemText" href="#"
                  >Catering</a
                >
                <div class="dropdown-content">
                  <a href="#" class="menuItems">Request an Event</a>
            </div>
      </div>
      </li>
      <li class="nav-item">
        <a class="nav-link font-weight-bold listItemText" href="#">Order Online</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold listItemText" href="#"
                >Contact Us</a
              >
            </li>
          </ul>
        </div>
        <div class="pr-5 mr-5"></div>
      </nav>
    </div>
    <!-- End of NavBar -->
    <!-- Coast Cafe Logo -->
    <div class="container-fluid"><!-- instance2 -->
    <div class="row">
      <div class="col-4 d-flex"></div>
      <div class="col-4 text-center">
        <img
          src="img/CoastCafeLogoUpdated.png"
          class="img-fluid text-center pt-5 mt-5 mx-auto"
        />
      </div>
      <div class="col-4 d-flex text-right"></div>
    </div>
    </div>
    <!-- End of the Combination Plates Menu Title  -->

    <div class="container mt-5 pt-5">
      <div class="row">
        <div class="col">
          <h1
            class="appetizersH1 display-1 text-sm-center text-md-center text-lg-center text-xl-center "
          >
            Appetizers
          </h1>
        </div>
      </div>
      <hr class="ml-5 mr-5 hrSeperator" />
      <!-- First Row Menu Items -->
      <div class="row mt-5 pt-5">
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
            >
              Corn Bread
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left txt-lg-left text-xl-left"
            >
              Beef Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote class="blockquote">
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
            >
              Beef & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
      </div>
      <!-- Second Row of Menu Items -->
      <div class="row mt-5 pt-5 d-flex">
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left"
              style="white-space: nowrap;"
            >
              Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left txt-lg-left text-xl-left"
              style="white-space: nowrap;"
            >
              Jerk Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
        <div class="col">
          <blockquote>
            <h1
              class="menu-item-h1 blockquote text-sm-left text-md-left text-lg-left text-xl-left
              "
              style="white-space: nowrap;"
            >
              Buffalo Chicken & Cheese Patty
            </h1>
          </blockquote>
          <p class="appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="appetizer-description">$4.00</p>
        </div>
      </div>
      <!-- Third Row of Menu Items -->
      <div class="row mt-5 pt-5">
        <div class="col">
          <blockquote>
            <h1 class="menu-item-h1 blockquote text-center">
              Fries
            </h1>
          </blockquote>
          <p class="d-flex justify-content-center appetizer-description">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis,
            consequuntur.
          </p>
          <p class="d-flex justify-content-center appetizer-description">
            (Sm) $4.00
          </p>
          <p class="d-flex justify-content-center appetizer-description">
            (XL) $4.00
          </p>
        </div>
      </div>
    </div>
    <!-- End of Main Content Body -->

    
    <div class="jumbotron jumbotron-fluid display-4 mt-5 pt-5"></div>

    <!-- Footer -->
    <div class="footerContainer justify-content-center">
      <div class="row pt-5">
        <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9 pt-3">
          <h1 class="coastCafeFooterH1 d-flex justify-content-center">
          
          </h1>
          <p class="coastCafeFooterH1 d-flex justify-content-center">
 
          </p>
          <div class="coastCafeFooterH1 d-flex justify-content-center">
         
          </div>
          <div class="d-flex pt-3">
            <a href="">
              <i class="fab fa-instagram fa-2x" style="color: white;"></i>
            </a>
        <a href="https://www.facebook.com/thecoastcafe">
          <i class="fab fa-facebook-f fa-2x pl-5" style="color: white;"></i>
        </a>
        <a href="">
          <i class="fab fa-twitter fa-2x pl-5" style="color: white;"></i>
        </a>
  </div>
</div>
</div>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-analytics.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

<!-- JS & JQUERY -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</div>
0
Akber Iqbal 20 grudzień 2019, 04:35