0
私のCSSに問題があります。モバイルに行くときに、私は消えたいと思う余白があります。これは、特に左にカーソルを移動し始めたときに表示され、右の白いマージンが表示され始めます。コードをスニペットに入れて結果を表示しています。モバイル右白の余白に行くときにCSSの問題
@charset "UTF-8";
/* CSS Document */
.img-responsive {
\t display:inline-block;
\t max-height:100px;
\t max-width:auto;
\t padding-top:0;
\t padding-bottom:50px;
}
section
{
}
.banner
{
background:red;
min-height:200px;
}
.banner .row
{
text-align:center;
margin-top:50px;
}
.banner h1
{
color:white;
}
.social{
\t width:60%;
\t margin:auto;
\t padding-bottom:100px;
}
/***********************************************************************
* OPAQUE NAVBAR SECTION
***********************************************************************/
.opaque-navbar {
background-color: rgba(0,0,0,0);
height: 100px;
border-bottom: 0px;
transition: background-color .5s ease 0s;
}
.opaque-navbar.opaque {
background-color: #0670EB;
height: 100px;
transition: background-color .5s ease 0s;
}
ul.dropdown-menu {
background-color: black;
}
<!-- navbar button-->
.navbar-btn {
border-color: #ffffff;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #0670EB;
background-color: #ffffff;
padding: 6px 12px !important;
margin-top: 40px;
}
.navbar-btn:hover {
color: #FFF;
background-color: #0670EB !important;
border-color: #FFF !important;
}
.btn-primary {
\t padding-top:10px;
border-color: #ffffff;
\t background-color:#ffffff;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #0670EB;
\t margin-top: 25px;
\t height:40px;
}
@media (max-width: 992px) {
body
{
\t max-width:100%;
background:white;
}
.opaque-navbar {
background-color: transparent;
height: 60px;
transition: background-color .5s ease 0s;
}
}
<!-- carousel-->
/* Carousel base class */
.carousel {
\t max-width:100%;
margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-btn {
border-color: #0670EB;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #FFFFFF;
background-color: #ffffff;
padding: 6px 12px !important;
margin: 0px 0px 0px 10px;
}
.carousel-btn:hover {
color: #FFF;
background-color: #FFFFFF !important;
border-color: #0670EB !important;
}
.btn-carousel {
border-color: #ffffff;
\t background-color:#0670EB;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #0670EB;
}
@media (max-width: 767px) {
.item {
height: auto;
}
.item > img {
width: auto%;
}
}
/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
.item {
height: auto;
}
.item > img {
width: 100%;
}
}
/* laptops */
@media (max-width: 1023px) and (min-width: 992px) {
.item {
height: auto;
}
.item > img {
width: 100%;
}
}
/* desktops */
@media (min-width: 1024px) {
.item {
height: 650px;
}
.item > img {
width: 100%;
}
}
@media (min-width: 769px) {
\t .carousel-caption p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:2em;
\t font-weight:400
\t }
\t .carousel-caption p1 {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:3em;
\t font-weight:bold
\t }
\t .carousel-caption {
\t top:50%;
\t bottom:auto;
\t z-index: 50;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
\t .carousel-caption p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:1.5em;
\t font-weight:400
\t }
\t .carousel-caption p1 {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:2.5em;
\t font-weight:bold
\t }
\t .carousel-caption {
\t top:45%;
\t bottom:auto;
\t z-index: 50;
}
}
@media (max-width: 768px) {
\t .carousel-caption p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:1.2em;
\t font-weight:400
\t }
\t .carousel-caption p1 {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:1.5em;
\t font-weight:bold
\t }
\t .carousel-caption {
\t top:40%;
\t bottom:auto;
\t z-index: 50;
}
}
.divider {
\t margin-top:50px;
}
/* ------ H O W I T W O R K S ------ */
.how-it-works-title {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 24px;
font-weight:bold;
line-height: 18px;
margin: 25px 0 15px;
text-align:center;
padding-top:10px;
}
.how-it-works-subtitle {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 18px;
line-height: 18px;
margin: 25px 0 15px;
text-align:center;
padding-top:10px;
font-weight:lighter;
padding-bottom:10px;
}
.how-it-works-step-icon {
display: block;
margin: auto;
}
@media (min-width: 1024px) {
\t .section-title {
\t font-size: 28px;
\t font-color:#4C535D;
\t font-weight: bold;
\t line-height: 18px;
\t margin: 0;
\t padding-top:50px;
\t padding-bottom:60px;
\t text-align: center;
\t text-transform: uppercase;
}
}
@media (max-width: 768px) {
\t .section-title {
\t font-size: 20px;
\t font-color:#4C535D;
\t font-weight: bold;
\t line-height: 18px;
\t margin: 0;
\t padding-top:50px;
\t padding-bottom:60px;
\t text-align: center;
\t text-transform: uppercase;
}
\t
}
.section-subtitle {
\t font-size: 15px;
\t font-weight: normal;
\t letter-spacing: 1.5px;
\t margin: 10px 0 0 0;
\t text-align: center;
}
.featurette-divider {
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}
.featurette-heading {
font-size: 50px;
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}
.marketing-title {
\t text-align:center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
color: #4C535D;
\t padding-bottom:50px;
}
.marketing-sub {
\t text-align:center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:30px;
font-weight: bold;
color: #4C535D;
\t padding-bottom:50px;
}
<!-- categories-->
.category {
padding-top: 3rem;
padding-bottom: 3rem;
background-color: #096;
}
@media (min-width: 1024px) {
\t
.categoryimg {
\t display:block;
height:487px;
max-width:100%;
}
.categorytext {
padding: 0 15px;
padding-top:12%;
font-family: Avenir;
color:#0670EB;
font-weight:bold;
background-color:white;
height:487px;
float:left;
}
.lead {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
color:#4C535D;
padding-right:10px;
}
\t
}
@media (max-width: 768px) {
\t .categoryimg {
\t display:block;
height:300px;
max-width:100%;
}
.container {
\t margin:auto;
\t max-width:100%;
}
.container-fluid {
\t max-width:100%;
}
.categorytext {
padding: 0 15px;
padding-top:10px;
font-family: Avenir;
color:#0670EB;
font-weight:bold;
background-color:white;
height:200px;
float:left;
}
.lead {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size:14px;
color:#4C535D;
padding-right:10px;
}
\t
}
.input-group {
margin: 20px auto;
width: 100%;
}
input.btn.btn-lg,
input.btn.btn-lg:focus {
outline: none;
width: 40%;
height: 60px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
button.btn {
\t background-color:#0670EB;
\t margin-left:50px;
width: 150px;
height: 60px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.subscribe {
justify-content: center; \t
}
.pad0{
padding: 5px;
margin-bottom: 5px;
}
.footer {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:15px;
color: #4C535D;
}
.license {
\t text-align:center;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
\t font-size:12px;
color: #4C535D;
}
.container {
\t margin:auto;
\t display:block;
\t max-width:100%;
}
.container-fluid {
\t margin:auto;
\t max-width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>nibook | Share your skills and services with locals | Break the wall </title>
\t <!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/stylesheet.css" rel="stylesheet">
<link href="css/classic-10_7.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-menu-hamburger" style="color:white;"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo_white.png" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="navMain">
<ul class="nav navbar-nav pull-right">
<a class="btn btn-primary navbar-btn" href="main/profile.html">Become nibooker</a>
</ul>
</div>
</div>
</div>
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<!-- carousel indicators-->
<ol class="carousel-indicators">
<li data-target="#mycarousel" data-slide-to="1" class="active"></li>
<li data-target="#mycarousel" data-slide-to="2"></li>
<li data-target="#mycarousel" data-slide-to="3"></li>
</ol>
<!-- wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="img/bkg/3.png" alt="First slide">
<div class="container">
<div class="carousel-caption">
<p1>SHARE YOUR SKILLS AND SERVICES WITH LOCALS</p1>
<p>#BreakTheWall</p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="img/bkg/2.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<p1>MONETIZE YOUR SKILLS AND TALENT</p1>
<p>#BreakTheWall</p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide"src="img/bkg/1.png" alt="Third slide" >
<div class="container">
<div class="carousel-caption">
<p1>GET AN EXTRAORDINARY CHINA'S EXPERIENCE</p1>
<p>#BreakTheWall</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#mycarousel" button="button" data-slide="prev" >
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#mycarousel" button="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="container">
<div class="row">
<h1 class="section-title"> HOW NIBOOK WORKS</h1>
<div class="col-sm-4"><img src="img/Profile.png" class="how-it-works-step-icon"> <h1 class="how-it-works-title">Become a Nibooker</h1>
<h2 class="how-it-works-subtitle">Create your profile and start sharing your skills and services to locals</h2></div>
<div class="col-sm-4"><img src="img/bookmark.png" class="how-it-works-step-icon"><h1 class="how-it-works-title">Get booked from locals</h1>
<h2 class="how-it-works-subtitle">Meet in your convenient place to provide your talent</h2></div>
<div class="col-sm-4"><img src="img/page.png" class="how-it-works-step-icon"><h1 class="how-it-works-title">Receive your money</h1>
<h2 class="how-it-works-subtitle">Get your money directly to your account</h2></div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<h1 class="section-title"> What's skills can you provide to locals?</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-6 pad0">
<img src="img/language.png" class="categoryimg" alt="Generic placeholder image">
</div>
<div class="col-sm-6 pad0">
<div class="categorytext">
<h2>LANGUAGES</h2>
<p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-6 col-sm-push-6 pad0">
<img src="img/art.png" class="categoryimg" alt="Generic placeholder image">
</div>
<div class="col-sm-6 col-sm-pull-6 pad0">
<div class="categorytext">
<h2>CREATIVITY</h2>
<p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-6 pad0">
<img src="img/dailylife.png" class="categoryimg" alt="Generic placeholder image">
</div>
<div class="col-sm-6 pad0">
<div class="categorytext">
<h2>DAILY LIFE</h2>
<p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p>
</div>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-sm-6 col-sm-push-6 pad0">
<img src="img/fashion.png" class="categoryimg" alt="Generic placeholder image">
</div>
<div class="col-sm-6 col-sm-pull-6 pad0">
<div class="categorytext">
<h2>LIFESTYLE</h2>
<p class="lead">Nibook is a platform where foreigners can change their frame time into money by crafting beautiful services and share them with the locals within in-person or online experiences.</p>
</div>
</div>
</div>
</div>
</div></div>
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
<h1 class="marketing-title">WHERE NIBOOK IS HAPPENING</h1>
<div class="col-lg-4">
<img class="img-circle" src="img/hangzhou.png" alt="Generic placeholder image" width="140" height="140">
<h2 class="marketing-sub">Hangzhou</h2>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/shanghai.png" alt="Generic placeholder image" width="140" height="140">
<h2 class="marketing-sub">Shanghai</h2>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="img-circle" src="img/qingdao.png" alt="Generic placeholder image" width="140" height="140">
<h2 class="marketing-sub">Qingdao</h2>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="subscribe">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<div id="mc_embed_signup_scroll">
<div class="indicates-required">Subscribe to know more!</div>
</div></div>
</div>
</div></div>
<div id="mc_embed_signupform">
<div class="container-fluid">
<div class="container">
<div class="row">
<form class="form-inline" action="http://nibook.us14.list-manage.com/subscribe/post?u=aa8370722661ed324627f57b5&id=57f1deb3f4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" placeholder="Enter your email" name="EMAIL" class="requiredemail" id="mce-EMAIL">
</div>
<input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="button">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="social">
<div class="border col-lg-3"><img src="img/facebook.png"></div>
<div class="border col-lg-3"><img src="img/instagram.png"></div>
<div class="border col-lg-3"><img src="img/weibo.png"></div>
<div class="border col-lg-3"><img src="img/wechat.png" ></div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<p class="footer">About us</p>
<p class="footer">Terms of Service</p>
<p class="footer">Career</p>
<p class="footer">Contact us</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<p class="license">Copyright © 2016 Hangzhou Boru Network Technology Co. Ltd, All Rights Reserved - 浙ICP备15022282号-10</p>
</div>
</div>
</div>
<!-- Chatra {literal} -->
<script>
ChatraID = 'yxdSsZojbr259XBcX';
(function(d, w, c) {
var n = d.getElementsByTagName('script')[0],
s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = (d.location.protocol === 'https:' ? 'https:': 'http:')
+ '//call.chatra.io/chatra.js';
n.parentNode.insertBefore(s, n);
})(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/opaque.js"></script>
</body>
</html>
あなたのコードをjsfiddleまたはあなたの作業リンク上で共有してください。 – JeetDaloneboy
@JeetDaloneboy http://120.25.106.212 – ChinaXiaoHong