0
Ich habe ein Problem mit meiner Website, wenn ich die Bildschirmgröße verkleinere die Stile für einige Elemente verschwinden Ich habe versucht, einige Links zu entfernen, um zu sehen, ob das das Problem war Ich habe es auch durchgemacht und ich konnte das Problem einfach nicht finden, Wenn Sie mir trotzdem helfen könnten, würde ich es schätzen. Danke!Meine CSS-Stile verschwinden?
Mein Code, habe ich auch diese on codepen geschrieben:
Meine CSS und HTML:
body {
width: 100%;
height: 100%;
font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background-color: #000;
overflow:hidden;
}
html {
width: 100%;
height: 100%;
}
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
.brand-heading {
font-family: 'Lobster';
font-weight: bolder;
}
p {
margin: 0 0 25px;
font-size: 18px;
line-height: 1.5;
}
@media(min-width:768px) {
p {
margin: 0 0 35px;
font-size: 20px;
line-height: 1.6;
}
}
a {
color: #42dca3;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: #1d9b6c;
}
.light {
font-weight: 400;
}
.navbar-custom {
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, .3);
text-transform: uppercase;
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #000;
}
.navbar-custom .navbar-brand {
font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
outline: 0;
}
.navbar-custom .navbar-brand .navbar-toggle {
padding: 4px 6px;
font-size: 16px;
color: #fff;
}
.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
outline: 0;
}
.navbar-custom a {
color: #fff;
}
.navbar-custom .nav li a {
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.navbar-custom .nav li a:hover {
outline: 0;
color: rgba(255, 255, 255, .8);
background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
outline: 0;
background-color: transparent;
}
.navbar-custom .nav li.active {
outline: 0;
}
.navbar-custom .nav li.active a {
background-color: rgba(255, 255, 255, .3);
}
.navbar-custom .nav li.active a:hover {
color: #fff;
}
@media(min-width:768px) {
.navbar-custom {
padding: 20px 0;
border-bottom: 0;
letter-spacing: 1px;
background: 0 0;
-webkit-transition: background .5s ease-in-out, padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out, padding .5s ease-in-out;
transition: background .5s ease-in-out, padding .5s ease-in-out;
}
.navbar-custom.top-nav-collapse {
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, .3);
background: #000;
}
}
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/gh-pages/img/intro-bg.jpg?raw=true) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.intro .intro-body {
display: table-cell;
vertical-align: middle;
}
.intro .intro-body .brand-heading {
font-size: 40px;
}
.intro .intro-body .intro-text {
font-size: 18px;
}
@media(min-width:768px) {
.intro {
height: 100%;
padding: 0;
}
.intro .intro-body .brand-heading {
font-size: 100px;
}
.intro .intro-body .intro-text {
font-size: 26px;
}
}
.btn-circle {
width: 70px;
height: 70px;
margin-top: 15px;
padding: 7px 16px;
border: 2px solid #fff;
border-radius: 100%!important;
font-size: 40px;
color: #fff;
background: 0 0;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus {
outline: 0;
color: #fff;
background: rgba(255, 255, 255, .1);
}
.btn-circle i.animated {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.btn-circle:hover i.animated {
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
.content-section {
padding-top: 200px;
}
@media(min-width:767px) {
.content-section {
padding-top: 250px;
}
footer {
position:relative;
padding-bottom: 50px;
}
footer p {
margin: 0;
}
#contact {
height:90%;
overflow:hidden;
}
.button {
display: inline-block;
white-space: nowrap;
background-color: dodgerblue;
padding: 0 2em;
margin: 0.9em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: black;
}
.button:hover {color:black; box-shadow: 2px 2px 2px grey; transition:1s all ease-in;}
body {
webkit-tap-highlight-color: rgba(255, 255, 255, .2);
}<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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></title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="http://fonts.googleapis.com/css?family=Montserrat|Black+Ops+One|Luckiest+Guy|Montez|Courgette|Slackey|Fontdiner+Swanky|Permanent+Marker|Aclonica|Lobster" rel="stylesheet" type="text/css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<header>
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top"> <span class="light">Magic</span>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#donate">Donate</a>
</li>
<li>
<a class="page-scroll" href="#teachings">Teachings</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<!-- Contact Section -->
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-12">
<h2>Contact</h2>
<p>Feel free to email us if you have any questions, or to just say hello.</p>
<a href="" class="button email">Send email</a>
</div>
</div>
</section>
<footer>
<div class="container text-center">
<p>Copyright © Magic 2016</p>
</div>
</footer>
</body>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</html>
können Sie sagen Bewegen Sie den Knopf, welches Element Sie Problem haben? –
Warum nicht einen Code schreiben, an dem du gearbeitet hast, um die pgrmrs beim Sehen dieser Quest zu unterstützen? – rahul
Du verwendest externe Stylesheets (Beispiel: 'css/bootstrap.min.css'), die mit @media-Abfragen arbeiten und die Objekteigenschaften in einem anderen Ansichtsfenster ändern -Größen. –