0
私の最初のウェブサイトはモバイル対応ではありません。私は行とcol-xs、col-md、col-lgを含んでいますが、まだモバイルフレンドリーではありません。私は間違って何をしています。助けてください。ウェブページはモバイルフレンドリーではなく、応答しません
私のウェブサイトのページ：http://www.kiljakandweb.com/
マイHTML：
<!DOCTYPE html>
<html>
<head>
<title>KILJAK & WEB</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="css/main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
</head>
<body>
<!-- Header -->
<header id="top" class="header">
<svg width="0" height="0">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="MO, 0 0, 100% 0, 100% 100, 0% 80%"/>
</clipPath>
</defs>
</svg>
<div class="menu" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text-vertical-center">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h1>I CODE. IT'S WHAT I DO.</h1>
</div>
</div>
</div>
<div class="arrow bounce"></div>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row aboutme">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1">
<p>Decent portfolio is the perfect way to show off. This website features some brilliant projects from a London based full-stack Web Developer. Bears are for testing purposes only.</p>
<p class="russiantext">На самом деле, медведи тут не при чём. Это никак меня не характеризует, но история с их участием имеет место быть, поэтому пускай будут для настроения и атмосферы. </p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<style>
#googleMap {
width: 100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white */
}
</style>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCJw0QfJXXleECtFD5031OMG75lZMiC6dY
'></script>
<script>
var myCenter = new google.maps.LatLng(51.5257, -0.0774);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 col-md-10 col-md-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h4><strong>KILJAK & WEB</strong>
</h4>
<p>Ace Hotel Shoreditch
<br>London, UK E1 6JQ</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (44) 7568599454</li>
<li><i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<a href="#"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © KILJAK & WEB 2016</p>
</div>
</div>
</div>
<a id="to-top" href="#top" class="btn btn-dark btn-lg"><i class="fa fa-chevron-up fa-fw fa-1x"></i></a>
</footer>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>
マイCSS：
@import url('https://fonts.googleapis.com/css?family=Oswald:300');
@import url('https://fonts.googleapis.com/css?family=Oswald');
html,
body {
width: 100%;
height: 100%;
background-color: lightgray;
}
.logo {
position: absolute;
top:0;
left:0;
}
.menu {
display:inline-block !important;
cursor: pointer;
margin-left: 10px;
margin-top: 40px;
}
.bar1, .bar2, .bar3 {
width: 45px;
height: 5px;
background-color: white;
margin: 6px 0;
transition: 0.1s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 20px;
padding: 20px;
font-size: 3.5em;
font-weight: 150;
color: white;
letter-spacing: 2px;
}
.btn {
text-transform: uppercase;
font-weight: 100;
letter-spacing: 3px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 0;
}
.btn-default {
border: 1px solid #42DCA3;
color: #42DCA3;
background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
border: 1px solid #42DCA3;
outline: none;
color: black;
background-color: #42DCA3;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background-image: url('../images/background.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
clip-path: url(#myClip);
-webkit-clip-path: url(#myClip);
-webkit-clip-path: polygon(
0 0, /* left top */
100% 0, /* right top */
100% 100%, /* right bottom */
0% 85% /* left bottom */
);
}
#top {
font-family: 'Oswald', sans-serif;
font-size: 50px !important;
line-height: 15px;
}
.about {
padding: 200px 0;
background-color: lightgray;
opacity: 1;
z-index: 1;
background-image: url('../images/Untitled-20.png');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.aboutme {
border: solid;
border-width: thick;
padding: 60px 20px 60px 20px;
margin: 100px;
border-color: #23527C;
font-family: 'Oswald', sans-serif;
color: black;
font-size: 29px !important;
line-height: 49px;
}
.russiantext {
padding-top: 30px;
font-size: 20px !important;
font-weight: lighter;
line-height: 29px !important;
}
.conactme {
padding: 100px;
}
footer {
background-color: #eae8e8;
padding: 100px 0;
font-family: 'Oswald', sans-serif;
font-size: 13px !important;
font-weight: lighter;
line-height: 15px;
}
ようこそ。何がどのように求められるかを確認するには、[help]をご覧ください。アイデアは[mcve]を投稿するだけでなく、あなたのページを私たちの目に見えない頭に投げて眼球のデバッグすることです。ベアとすべて。あなたの問題を小さなものに分けて、よく定義された質問をするか、あまりにも広すぎるトピックとして閉じられた質問を見てください。 エディタの '<>'ボタンに注意してください。それはあなたにテストに作業コードを入れる場所を与えるでしょう – mplungjan