1
Ich mache den Web-Entwickler-Kurs bei FreeCodeCamp, und ich bin auf der Aufgabe fest, in der ich meine eigene Portfolio-Webseite erstellen muss. Es muss sich um eine einseitige Scroll-Webseite mit drei oder mehr Abschnitten handeln, auf die über die Navigationsleiste oder durch Scrollen zugegriffen werden kann. Bisher habe ich ein Grundlayout erstellt und habe (fast) alles zum arbeiten gebracht. Jemand sagte jedoch, dass die Webseite nicht richtig für Bildschirme mit höherer Auflösung skaliert wurde.Fragen über die Reaktionsfähigkeit meiner Webseite
Jetzt, um das zu beheben, setze ich Breite und Höhe für alle Bilder in meiner CSS-Datei auf 100%. Ich habe 1920x1080 Bilder verwendet, also nehme ich an, dass das Problem sein könnte. Korrigiere mich, wenn ich falsch liege, aber ich denke, die Verwendung von .svg-Bildern sollte dabei helfen. Dies bezieht sich jedoch nur auf die Bilder und auf dem Desktop. Auf Mobilgeräten sieht die Webseite sehr schlecht aus und ein Teil des Textes wird von der Navigationsleiste abgedeckt.
Also, wie würde ich gehen, das zu beheben? Ich bin ein Anfänger, also bitte entschuldigen Sie, wenn das eine sehr grundlegende Frage ist.
Mein Code:
$(document).ready(function(){
$('.nav li a').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body')
.animate({scrollTop: targetOffset}, 750);
return false;
}
}
});
});@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://fonts.googleapis.com/css?family=Oswald');
body {
padding-top: 70px;
}
.hello {
padding-top: 70px;
background-image: url("https://images3.alphacoders.com/853/85305.jpg");
background-repeat: no-repeat;
min-height:100%;
min-width:100%;
background-attachment: fixed;
padding-bottom: 100%;
}
.hello h1 {
font-family: Oswald;
text-align: center;
color: white;
font-size: 125px;
}
.hello h3 {
font-family: Oswald;
text-align: center;
color: white;
}
.hello h5 {
font-family: Oswald;
text-align: center;
color: white;
}
.jumbotron {
background-color: grey;
}
#projects {
background-image: url("http://www.caoping8.com/wp-content/uploads/2014/06/popular-landscaping-heavenly-landscape-photography-magazine-pdf-landscape-wildlife-photography-magazine-landscape-photography-magazine-uk-the-landscape-photography-magazine-essential-guide-to-lan.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:100%;
min-width:100%;
padding-top:100px;
padding-bottom:100%;
}
#projects h2 {
color: #f2f2f2;
font-family: monospace;
text-align: center;
font-size: 15px;
}
.placeholder1 {
padding-left: 150px;
align: left;
}
.placeholder2 {
padding-right: 150px;
align: center;
}
.placeholder3 {
padding-right: 150px;
align: right;
}
#about {
background-image: url("https://i.ytimg.com/vi/n-9ZLWnFbOI/maxresdefault.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
min-height:1000px;
width: 100%;
padding-top: 30px;
}
.infoLeft {
color: white;
font-family: Oswald;
padding-left: 17px;
text-align: left;
}
.infoRight {
color: #000;
font-family: Oswald;
padding-right: 17px;
text-align: right;
}
.infoCenter {
color: #000;
font-family: monospace;
text-align: center;
padding-top: 25px;
font-size: 15px;
}
#contact {
background-image: url('http://res.cloudinary.com/aninternetuser/image/upload/v1463674617/full_hd_nature_wallpapers_1080p_desktop_river_and_autumn_forest_d1dest.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
width: 100%;
padding-bottom: 100%;
}<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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" aria-expanded="false">
<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" href="#">Krunal Rindani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="hello" id="home">
<h1></h1>
<h1></h1>
<h1>Hello.</h1>
<div class="jumbotron">
<h3>This is my portfolio website. You can find my contact details and past work here. You can also learn more about me here!</h3>
<h5>You can navigate through the webpage using the four hyperlinks, or you can scroll.</h5>
</div> <!-- end Jumbotron -->
</div> <!-- end Home -->
<div id="projects">
<h2>This area will be updated with a list of all my projects. This is my first one.</h2>
<div class="row">
<div class="col-xs-6 col-md-3 placeholder1">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder1 -->
<div class ="col-xs-6 col-md-3 placeholder2">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder2 -->
<div class ="col-xs-6 col-md-3 placeholder3">
<a href="#" class="thumbnail jumbotron">
<img src="http://res.cloudinary.com/aninternetuser/image/upload/v1463737886/placeholder_pwcts4.png" alt="placeholder">
</a>
</div> <!-- end placeholder3 -->
</div>
</div> <!-- end Projects -->
<div id="about">
<div class="infoLeft">
<h1>About Me:</h1>
</div> <!-- end infoLeft -->
<div class="infoRight">
<h4>I am a teen who loves everything with an engine and is fascinated by technology.</h4>
<h4>I just got done with A Levels and am enjoying the freedom!</h4>
</div> <!-- end infoRight -->
<div class="infoCenter">
<h3>Scroll down or click on Contact on the navigation bar to see the contact options.</h3>
</div> <!-- end infoCenter -->
</div> <!-- end About -->
<div id="contact">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
</div> <!-- end Contact -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>dieses CodePen Link Projekt: http://codepen.io/AnInternetUser/pen/zqVZBL?editors=0010
Ihr Problem ist die navbar erweitert und bedeckt das Bild nach rechts? –
@DhavalCheda That, und das Skalierungsproblem für höhere res Anzeigen. –