0
Meine erste Website ist nicht mobil ansprechend. Ich habe Zeilen und Col-Xs, Col-Md, Col-lg enthalten, aber es ist nicht immer noch mobil freundlich. Was mache ich falsch. Bitte helfen Sie.Webseite ist nicht mobil freundlich, reagiert nicht
Meine Webseite Seite: http://www.kiljakandweb.com/
Mein 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>
Mein 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;
}
Willkommen bei SO. Bitte besuchen Sie die [Hilfe], um zu sehen, was und wie zu fragen. Die Idee ist, ein [mcve] zu posten und nicht nur Ihre Seite auf unsere ahnungslosen Köpfe zum Augapfel-Debug zu werfen. Bären und alle. Schneiden Sie Ihre Probleme in kleine Teile und stellen Sie klar definierte Fragen oder sehen Sie Ihre Frage als zu weit vom Thema entfernt. Bitte beachten Sie den '<>' Knopf im Editor. Es wird Ihnen einen Platz geben, Arbeitscode auf den Prüfstand zu stellen – mplungjan