家庭英雄下面的内容向左倾斜 - 响应式设计 - 低于640px

问题描述 投票：0回答：3

我对网络开发的冒险很新。我正在处理我正在处理的网站的问题。我对响应式设计没有任何问题，直到我得到大约640px。一旦我达到640px或将我的html所有squhes吹向左边，除了我的主人英雄和导航栏。如果我将标题宽度设置为自动。导航栏将达到网站其余部分的相同宽度，但将home heros div width设置为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

html css responsive-design media-queries
3个回答
0
投票

在花括号内使用媒体查询@media (max-width: 768px){}将你的一份总css复制下来，如果你想改变这些值你可以改变它

0
投票

我没有看到浮动到图像左侧的实际内容的代码或它正在使用的css类。您只显示内容浮动之前正常显示的内容。为了彻底回答这个问题，需要整个代码。

但是，如果将整个浮动的内容放在另一个div中，其类具有与此类似的css规则，会发生什么：

.text-center {
    display: inline;
    float: none;
    text-align: center;
}

对于我想要集中的任何内容，我就是这样做的。它会覆盖任何其他可能使其向左浮动的css规则。

另外，我建议使用Bootstrap。它已经为列安排编写了css规则。您只需调用正确的规则即可格式化列。

编辑答案：

你能把这两个答案结合起来吗？这不起作用吗？

@media (max-width: 768px){
  .content-wrap {
    display: inline;
    float: none;
    text-align: center;
  }
}
0
投票

它似乎与我的主人英雄的填充有关。我改变了某些分辨率宽度的填充尺寸，结果很好。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.