我对Web开发的冒险还很陌生。我正在工作的网站出现问题。我的响应式设计没有问题，直到达到640像素为止。一旦我达到640px或将我的html吹到左侧，除了我的家庭英雄和导航栏。如果我将标题宽度设置为自动。导航栏将达到站点其余部分的相同宽度，但是将主英雄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>© 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;
}
}
最佳答案
在花括号内使用媒体查询@media (max-width: 768px){}放一整个CSS副本，如果要更改值，可以更改