0
Les premières images d'arrière-plan apparaissent sur les appareils mobiles, mais le dernier couple n'apparaît pas?Certaines images d'arrière-plan n'apparaissent pas dans les sections sur les appareils mobiles?
Heres un lien vers elle en direct: http://ryan-playground.com/cafe_neve_v2/
Il fonctionne très bien sur un ordinateur de bureau, mais sur mon iphone et mes amis galaxie les deux dernières images de fond ne semblent pas. Toutes les images d'arrière-plan ont le même style CSS donc il n'a pas de sens pour eux de ne pas apparaître?
Heres le code html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Café Névé</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
<link rel="stylesheet" href="css/creative.css" type="text/css">
<link rel='shortcut icon' href='img/favicon.ico' type='image/x-icon'/ >
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-offset="50">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#page-top"><!--Café Névé--></a>
<div>
<a href='https://www.facebook.com/Caf%C3%A9-N%C3%A9v%C3%A9-86198556375/' target='blank'><img class='facebooklink' src='img/blue_facebook.png'></a>
<a href='https://instagram.com/explore/locations/410052/' target='blank'><img class='instagramlink' src='img/blue_instagram.png'></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#sec1">About</a>
</li>
<li>
<a class="page-scroll" href="#sec3">Rachel</a>
</li>
<li>
<a class="page-scroll" href="#sec4">Mile End</a>
</li>
<li>
<a class="page-scroll" href="#sec5">Stanley</a>
</li>
<li>
<a class="page-scroll" href="#sec6">Toronto</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="header alt vert">
<div class="container">
<h1 id='topheader'> Café Névé
<p class="lead"><img src='img/snowflake.png'></p></h1>
</div>
<div id="sec1" class="blurb">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1 id='who'>Who We Are</h1>
<p class="lead"><!--The Most Popular Responsive Framework--></p>
</div>
</div>
</div>
</div>
</div>
<div class="featurette" id="sec2">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<!-- <h1>Amazing Features</h1> -->
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="featurette-item">
<i class="icon-rocket"></i>
<h4>Mission</h4>
<p>Words we live by</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-magnet"></i>
<h4>History</h4>
<p>Where we came from</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-shield"></i>
<h4>Source</h4>
<p>What we brew and why</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="featurette-item">
<i class="icon-pencil"></i>
<h4>Retailers</h4>
<p>Where you can get our coffee</p>
</div>
</div>
</div>
</div>
</div>
<div class="callout" id="sec3">
<div class="vert">
<div class="col-md-12 text-center"><h2>RACHEL LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec4">
<div class="vert">
<div class="col-md-12 text-center"><h2>MILE END LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec5">
<div class="vert">
<div class="col-md-12 text-center"><h2>STANLEY LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="callout" id="sec6">
<div class="vert">
<div class="col-md-12 text-center"><h2>TORONTO LOCATION</h2></div>
<div class="col-md-12 text-center"> </div>
<div class="col-md-8 col-md-offset-2 text-center">
</div>
</div>
</div>
<div class="blurb bright">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Founding Partners</h3>
<br>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2> Luke</h2></div>
<div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis si.
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="panel-heading text-center"><h2>Gabriel </h2></div>
<div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit.
</div>
</div>
</div>
</div>
</div>
<!--
<div class="blurb">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>Sharing the Bootstrap Love</h3>
<p class="lead"></p>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="icon-facebook icon-2x"></i></li>
<li><i class="icon-twitter icon-2x"></i></li>
<li><i class="icon-google-plus icon-2x"></i></li>
<li><i class="icon-pinterest icon-2x"></i></li>
</ul>
<hr>
<p>Built with <i class="icon-heart-empty"></i> at <a href="http://www.bootply.com">Bootply</a>.<br>Company ©2014</p>
</div>
</div>
</div>
</footer>
<ul class="nav pull-right scroll-down">
<li><a href="#" title="Scroll down"><i class="icon-chevron-down icon-3x"></i></a></li>
</ul>
<ul class="nav pull-right scroll-top">
<li><a href="#" title="Scroll to top"><i class="icon-chevron-up icon-3x"></i></a></li>
</ul>-->
<!-- script references -->
<script src="js/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Et voici le css:
/* -- custom css for Bootstrap 3.x --*/
/* move special fonts to HTML head for better performance */
@import url(http://fonts.googleapis.com/css?family=Voltaire);
html,
body {
height: 100%;
width: 100%;
font-family:Arial,sans-serif;
}
/* fix bs3 horizontal scrollbar bug */
.row { margin: 0; padding: 0 }
/* use special fonts in certain elements */
h1,h2,h3,h4,.lead,.btn,.navbar a {
text-transform:uppercase;
font-family:'Voltaire',Arial,sans-serif;
letter-spacing:2px;
}
h1 {
font-size:50px;
}
/* make images gray */
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.facebooklink{
width:18px;
height:auto;
margin-top: 14px;
position: absolute;
margin-left: 15px;
}
.instagramlink{
width:18px;
height:auto;
margin-top: 14px;
position: absolute;
margin-left: -10px;
}
.icon-bar {
background-color:#fff;
}
.scroll-down a, .scroll-top a {
color:#ffffff;
}
.scroll-down {
position:fixed;
bottom:20%;
right:0%;
color:#f9f9f9;
}
.scroll-top {
background-color:#dbdbdb;
}
#sec1{}
#sec2{}
#sec3{
background: url('../img/1.jpg') no-repeat center center fixed;
}
#sec4{
background: url('../img/3.jpg') no-repeat center center fixed;
}
#sec5{
background: url('../img/4.jpg') no-repeat center center fixed;
}
#sec6{
background: url('../img/6.jpg') no-repeat center center fixed;
}
.vert {
vertical-align: middle;
width:100%;
padding-top:4%;
text-align:center;
}
.header .btn-lg {
font-size:28px;
border-color:#eeeeee;
padding:15px;
background-color:transparent;
color:#ffffff;
}
.header .btn-lg:hover {
background-color:#eeeeee;
color:#777777;
}
.navbar a {
color:#87d6fd;
font-size:14px;
}
.navbar-bold.affix {
background-color:#d46054;
}
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
.navbar-bold {
background-color:#f68076;
font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}
.navbar-bold li a:hover, .navbar-bold li.active {
background-color:#d46054;
}
.header h1 {
font-size:60px;
margin-top: 120px;
color:rgba(255,255,255,1);
margin-left:-5px;
margin-bottom:5px;
text-transform:uppercase;
}
.header .lead {
color:#d46054;
font-size:25px;
}
.header {
height: 100%;
background: #f68076 url('../img/2_blur.jpg') repeat center center fixed;
}
#navbar{
}
/* use alt in navbar and header for different color */
.alt {
background-color: rgba(255,255,255,0.8);
}
.alt .lead {
color: #3B0496;
}
.alt.affix {
background-color:#4C06AB;
}
.alt li a:hover, .alt li.active {
background-color:#5D17BA;
}
#topheader{
}
.blurb {
padding: 120px 0;
}
.blurb .panel {
background-color:transparent;
}
.bright {
height: 100%;
background:white;
color:#777;
}
#who{
margin-top: 200px;
}
.featurette {
background: #fff;
padding: 50px 0;
color: rgba(1, 1, 1, 0.7);
}
.featurette-item {
margin-top: 70px;
margin-bottom: 15px;
}
.featurette-item > i {
border: 3px solid #87d6fd;
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
}
.featurette-item > i:hover {
font-size: 68px;
}
.callout {
color: #ffffff;
padding-top:7%;
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.gallery {
padding: 50px 0;
}
.call-to-action {
background: #eeeeee;
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
footer {
padding: 100px 0;
}
/* -- end custom css for Bootstrap 3.x --*/
Il semble fonctionner sur votre testeur de conception sensible, mais il le fait ne fonctionne pas sur un iPhone réel dont il a besoin. –