1
私のブレークポイントが1100pxのとき、画像を保持するdivを削除するようにCSSに指示しました。しかし、コンテンツの残りの部分は移動せず、（divがまだそこにあるように）大きな空白領域があります。私がしたいのは、すべてのコンテンツがページに移動して埋め尽くされることだけです。このエラーは、この単一ページで発生します。これは、この非常にブレークポイントに特有のものです。コンテンツに空白が残っています
/*minimised browser winddow */
@media(max-width: 1100px) {
header #branding,
header nav,
header nav li,
#newsletter form,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
aside {
display: none;
}
#newsletter h1 {
display: none;
}
}
/* 768 tablet */
@media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
display: none;
}
#showcase h1 {
font-size: 275%;
}
#showcase p {
font-size: 100%;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
.col-25,
.col-75 {
width: 100%;
margin-top: 0;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/* 400 pixels mobile phone */
@media screen and (max-width: 480px) {
header #branding,
header nav,
header nav li {
text-align: center;
font-size: 100%
}
header ul {
padding: 10px;
font-size: 100%;
}<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html9shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active"><a href="home9.html">Home</a></li>
<li><a href="about9.html">About</a></li>
<li><a href="services9.html">Services</a></li>
<li><a href="coverage9.html">Coverage</a></li>
<li><a href="contact9.html">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:140%;" onclick="myFunction()">☰</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="dark">
<div class="callus"><a href="tel:+07756848657"><i class="fa fa-phone fa-2x" ></i></a></div>
<h2>Our Story</h2>
</div>
</div>
<section id="main">
<div class="container">
<article id="main-col">
<p>
Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area.</p>
<div class="dark">
<h3>What We Offer</h3>
<ul>
<li>Plumbing and Heating Services</li>
<li>Gas Safe Registered: 202542</li>
<li>VAT Registered</li>
<li>25 years of expertise</li>
<li>Plumbing and Heating Services</li>
<li>Heating Engineer Qualified</li>
<li>VAT Registered</li>
<li>100% Satisfaction Garauntee</li>
</ul>
</article>
<aside id="sidebar">
<div class="dark">
<h3>Satisfaction Garauntee</h3>
<p>Reputation matters. 98% of our customer would reccomend us to a friend.</p>
<a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"><img class="catsmall" src="cat.png" alt="checkatradelogo"></a>
</div>
</aside>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
<p>Registered in England No. 4364232</p>
</div>
</footer>
私は黒のスペースを見ることができません。画像が削除され、フッターに置き換えられていることがわかります。 –
@DhavalJardoshここにページへのリンクがあります.hbs：//bsch-dev.chi.ac.uk/~ZCOMBER1/Version%209/about9.html –
@DhavalJardoshと画面幅を1200px、デスクトップのサイズの約半分に縮小します。ありがとう –