个人中心
gpt4 book ai didi

html - 主页英雄下方的内容向左挤压 - 响应式设计 - 低于 640 像素

转载 作者：行者123 更新时间：2023-11-28 02:04:49 30 4
gpt4 key购买 nike

我对 Web 开发的冒险还很陌生。我在使用的网站上遇到问题。在我达到大约 640px 之前，我的响应式设计没有问题。一旦我达到 640px 或将我的 html 全部压缩到左侧，除了我的主页英雄和导航栏。如果我将标题宽度设置为自动。导航栏将与站点的其余部分宽度相同，但是将 home heroes div 宽度设置为 auto，它什么也不做。主场英雄似乎保持不变。

有没有人有任何可能是问题的想法？提前致谢!

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="description" content="I specilize in kitchen and bathgroom remodels.">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>DJW, LLC</title>
  <link rel="stylesheet" href="/style.css" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <header>
    <div id="logo-bar">
      <img id="logo" src="Img/logo.png" alt="DJW logo">
    </div>
    <a id="phone-number" href="tel:17271234567">727-123-4567</a>
    <ul id="nav">
      <li><a href="#">Top</a></li>
      <li><a href="#content-wrap">Contact</a></li>
      <li><a href="#projects">Gallery</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </header>
  <div class="hero-image">
    <div id="color-overlay"> </div>
    <div class="hero-text">
      <h1>Quality Bathrooms & Kitchens</h1>
      <p>Over 35 Years of experience</p>
    </div>
  </div>
  <div id="content-wrap">
    <div class="main-content">
      <h2>Quality & Professionalism Garenteed!</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nibh vitae massa consectetur tincidunt. Aliquam turpis neque, eleifend nec rutrum quis, efficitur in erat. Nam eu leo id lacus tristique lobortis nec non nisl. Donec tincidunt id nulla
        quis convallis. Nunc ultricies mauris convallis nunc tempor commodo vitae ac nisi.
      </p>

      <h2>Custom Bathroom & Kitchen Remodels</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et nibh vitae massa consectetur tincidunt. Aliquam turpis neque, eleifend nec rutrum quis, efficitur in erat. Nam eu leo id lacus tristique lobortis nec non nisl. Donec tincidunt id nulla
        quis convallis. Nunc ultricies mauris convallis nunc tempor commodo vitae ac nisi.
      </p>
    </div>
    <div class="quote-form">
      <h2>Start on Your Free Quote!</h2>
      <input type="text" class="quote-input" placeholder="Name">
      <input type="number" class="quote-input" placeholder="Phone (number only)">
      <input type="email" class="quote-input" placeholder="Email">
      <input type="text" class="quote-input" placeholder="Address">
      <select class="quote-input" name="Room">
        <option selected disabled>Choose Project</option>
        <option value="Bathroom">Bathroom</option>
        <option value="Kitchen">Kitchen</option>
        <option value="Bathroom & Kitchen">Bathroom & Kitchen</option>
      </select>
      <textarea class="quote-input" cols="30" rows="6" placeholder="Type Your Message Here"></textarea>
      <a class="button quote-button" href="#"><strong>Get Your Free Quote</strong></a>
    </div>

  </div>
  <div id="gallery-wrapper">
  <div id="projects">
    <h2>Gallery</h2>
    <div class="proj-imgs">
      <a href="#img1" class="gal-img" ><img src="/img/kitchen1.jpg"></a>
      <a href="#_" class="lightbox" id="img1"><img src="/img/kitchen1.jpg"></a>

      <a href="#img2" class="gal-img" ><img src="/img/bathroom1.jpg"></a>
      <a href="#_" class="lightbox" id="img2"><img src="/img/bathroom1.jpg"></a>

      <a href="#img3" class="gal-img img-remove"><img src="/img/kitchen2.jpg"></a>
      <a href="#_" class="lightbox" id="img3"><img src="/img/kitchen2.jpg"></a>

      <div class="add-images">
      </div>
    </div>
    <div class="gallery-button-wraper">
      <div class="gallery-button">
        <p>Click The Arrow To See More!</p>
        <a id="arrow-button" class="button arrow-down"><i class="arrow fa fa-angle-down"></i></a>
      </div>
    </div>
  </div>
</div>
  <div class="about-wrapper">
    <div id="about">
      <h2>About DJW</h2>
      <p>Maecenas dignissim massa sed dignissim maximus. Praesent vel enim at lorem molestie rhoncus. Fusce vel iaculis purus, eget vehicula dui. Fusce posuere quam et quam porttitor, eget vestibulum quam malesuada. Nam pretium turpis finibus, ultricies
        risus ut, convallis dui. Sed semper gravida lorem, non faucibus tortor auctor at. Etiam eu nisl id ex elementum pellentesque blandit eget felis. Curabitur in ex in risus ultricies pellentesque. Praesent fringilla mauris mauris. Aliquam pretium,
        magna at consectetur eleifend, sem nunc lobortis ligula, id venenatis libero risus et nisl. Aenean feugiat hendrerit dui sed accumsan. Nam elementum elit sit amet dolor scelerisque elementum. Maecenas mollis erat at urna rhoncus interdum. Phasellus
        nibh est, mattis ut suscipit sed, laoreet quis justo. Fusce eleifend, quam id varius auctor, lorem justo fringilla sem, id sagittis risus leo maximus odio.</p>
    </div>
  </div>
</div>
  <footer>
    <div class="footer">
      <p> Address: 123 Address RD Tampa, FL 12345 </p>
      <p> Phone: 727-123-4567 </p>
      <ul class="footer-ul">
        <li><a href="">Privacy Policy</a></li>
        <li><a href="">Site Map</a></li>
        <li>&copy; DJW,LLC. All Rights Reserved</li>
      </ul>
    </div>
  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>


    CSS_________________________

         * {
  box-sizing: border-box;
  margin: 0;
}


/* Header Navigation */
header {
  width: 100%;
  height: 4.5em;
  background-color: #FF2C19;
  position: fixed;
  z-index: 998;
}

header ul {
  list-style: none;
  float: left;
  margin-top: 1.5em;
  margin-left: 16.5em;
}

header li {
  text-decoration: none;
  display: inline;
  padding: 1em 0;
  font-size: 1.5em;
}


header a {
  text-decoration: none;
  color: white;
  padding: 1em;
}

header a:hover {
  color: red;
}

header li:hover {
  background: white;
  color: red;
}

#logo-bar {
  width: 18em;
  height: 14em;
  background: rgb(244,244,244);
  border-radius: 0 0 20em 0;
  -webkit-clip-path: polygon(0 0,460px 0,400px 50%,0 100%);
  clip-path: polygon(0 0,460px 0,400px 50%,0 40%);
  position: fixed;
}

#logo {
  width: 6em;
  margin: .5em 0 2em 6em;
  position: fixed;
}

#phone-number {
  text-decoration: none;
  font-size: 2em;
  color: #fcfcfc;
  position: relative;
  margin: .35em 1em;
  padding: .1em .3em;
  border: .08em solid #fcfcfc;
  float: right;

}
#phone-number:hover {
  background-color: #fcfcfc;
  color: red;
}

/* Home Hero Section */
.hero-image {
background: url("img/bathroom.jpg");
padding: 20em;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-bottom: .15em solid black;
}

#color-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.4;
}

.hero-text {
  font-size: 2em;
  text-align: center;
  color: black;
  margin-top: 1em;
  padding: 2em;
  width: 66%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#content-wrap {
  width: 100%;
  padding-top: 4em;
}

.main-content {
  width: 60%;
  float: left;
  padding: 0em 4em 0em 7em;
  margin-top: 4em;
  margin-bottom: 5em;
}

.main-content h2{
  padding-bottom: 1.5em;
  font-size: 2.5em;
  color: red;
}

.main-content p {
  color: #444;
  padding-bottom: 2em;
  font-size: 1.5em;
}


.quote-form {
  position: relative;
  width: 35%;
  float: left;
  background: #444;
  padding: 1.5em 2em 2em;
  margin-top: 2em;
  margin-left: 2em;
  margin-bottom: 5em;
  border: .2em solid black;
  border-radius: .8em;
}

.quote-form h2 {
  color: #00BBFF;
  text-shadow: 1px 1px black;
  text-align: center;
  font-size: 2.5em;
  margin-bottom: .5em;

}

.quote-input {
  width: 100%;
  display: block;
  font-size: 1em;
  padding: .7em;
  margin: .7em 0;
  border: .15em solid black;
  border-radius: .5em;
}

.button {
  text-decoration: none;
  text-align: center;
  font-size: 2em;
}

.quote-button {
  display: block;
  padding: .3em 1em;
  margin-top: .5em;
  color: black;
  background-color: #00BBFF;
  border-radius: .2em;
}

#projects {
  background: #444;
  width: 100%;
  padding: 2em;
  padding-top: 0em;
  padding-bottom: 5em;
  display: inline-block;
}

#projects h2 {
  color: white;
  text-align: center;
  padding: 1.5em;
  font-size: 3em;
  text-decoration: underline;
}

.proj-imgs{
  background: linear-gradient(-90deg, #666, #555, #666);
  border-top: .15em solid black;
  border-bottom: .15em solid black;
  border-left: .1em solid #333;
  border-right: .1em solid #333;
  padding: 1em;
  width: 100%;
  text-align: center;
}


.proj-imgs img{
  width: auto;
  max-width: 32%;
  height: auto;
  max-height: 16em;
  margin: 5px;
  border: 1px solid #ccc;
  display: inline-block;
}


.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}

.lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    max-height: 90%;
    margin-top: 3%;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}

.gallery-button-wraper{
  padding: 1em;
  text-align: center;
}

.gallery-button p {
  padding: 1em;
  padding-top: 3em;
  color: white;
}

.arrow-down {
  margin-bottom: .1em;
  margin-top: -.4em;
  height: .3em;
  display: block;
  color: #00BBFF;
  font-size: 6em;
}

/* This is in JavaScript Only */
.arrow-up {
  margin-bottom: .1em;
  margin-top: -.4em;
  height: .3em;
  display: block;
  color: red;
  font-size: 6em;
}

.about-wrapper {
  margin: .5em 2em;
}

#about {
  width: 100%;
  background: white;
  padding: 5em 8em;
  text-align: center;
}

#about h2 {
  padding-bottom: .5em;
  font-size: 3em;
  text-decoration: underline;
}

#about p {
  padding-bottom: .5em;
  font-size: 1.5em;
}

footer {
  background-color: #444;
  padding: 3em;
}

footer li {
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  margin-bottom: -1em;
  color: white;
  font-size: .5em;
}

footer a {
  font-family: "arial", serif;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  padding: .3em;
  color: white;
}

footer a:hover, footer a:focus {
  color: red;
}

.footer {
  text-align: center;
  padding-top: 1em;
}

.footer p {
  text-align: center;
  font-size: 1.2em;
  display: inline-block;
  margin-bottom: 1em;
  padding-left: 2em;
  color: white;
}


@media (max-width: 82rem) {
  .gal-img img {
    max-height: 14em;
    max-width: 40%;
  }
}

@media (max-width: 70rem) {
  .gal-img img {
    max-height: 13em;
    max-width: 40%;
  }
}

@media (max-width: 65rem) {
  header li {
    display: none;
  }

  #content-wrap {
    padding: 1.5em;
    padding-top: 2.5em;
    margin: auto;
    display: block;
  }

  .main-content{
    float: none;
    width: auto;
    margin: 0;
    text-align: center;
    padding: 0 3em;
  }

  .main-content h2{
    padding-bottom: 1em;
  }

  .quote-form {
    position: none;
    float: none;
    width: auto;
    margin: 2em auto;
    margin-top: 1em;
    width: 80%;
    display: block;
  }

  .gal-img img{
    max-height: 14em;
    max-width: 50%;
  }

  .img-remove img{
    display: none;
  }
}

@media (max-width: 53rem) {
  .gal-img img{
    max-height: 9em;
    max-width: 50%;
  }
  .img-remove img{
    display: none;
  }
}

enter image description here

最佳答案

使用媒体查询 @media (max-width: 768px){} 在大括号内放置一份完整的 css，如果您想更改值，可以更改它

关于html - 主页英雄下方的内容向左挤压 - 响应式设计 - 低于 640 像素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49086161/

30 4 0
文章推荐： javascript - 使用 Cordova Webview/Phonegap 按钮 onclick 更改 native View (事件监听器)
文章推荐： html - 附加到居中对齐内容 block 一侧的菜单 block
文章推荐： 数组继承中的 C++ 对象
文章推荐： javascript - 如何使用 jQuery 使图像在滚动条上淡入淡出？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com