Hello, I’m working on a second front-end project. I have to do a single page portfolio. I’ve used class=“affix” in bootstrap, and my elements are not responsive anymore. Can someone help me, here is the code:
CSS CODE:
body {
font-family: 'Roboto Slab', serif;
}
.profilPic {
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid gray;
opacity: 0.8;
margin-left: auto;
margin-right: auto;
margin-top:10px;
}
#heading1 {
margin-top: 70px;
}
header {
background-color: rgb(146, 59, 60);
width: 1140px;
top: 0;
margin-left: auto;
margin-right: auto;
z-index: 999999;
}
nav {
background-color: #FFF;
width: 1140px;
top: 206px;
margin-left: auto;
margin-right: auto;
z-index: 999999;
}
em {
font-size: 0.7em;
}
HTMLCODE:
<div class="container">
<header class="affix">
<div class="row">
<div class="col-xs-6">
<h1 id="heading1" class="text-center"><strong>Nikola Petrović<br /></strong><em>Frontend Developer</em></h1>
</div>
<div class="col-xs-6">
<img src='//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/freecodecamp/original/3X/3/3/33441f935c69dcdb4efebea3fa829cd2cbd0fe76.jpg' alt="Nikola.jpeg" class="img-responsive profilPic">
</div>
</div>
<nav>
<div class="row">
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">ABOUT <i class="fa fa-info-circle"></i></h3>
</div>
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">PORTFOLIO <i class="fa fa-folder-open"></i></h3>
</div>
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">CONTACT <i class="fa fa-envelope"></i></h3>
</div>
</div>
</nav>
</header>
</div>
I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Here it is:
nikola.5rovic/portfoio
<style type="text/css">
body {
font-family: 'Roboto Slab', serif;
}
.profilPic {
width: 200px;
height: 200px;
border-radius: 50%;
border: 4px solid gray;
opacity: 0.8;
margin-left: auto;
margin-right: auto;
margin-top:10px;
}
#heading1 {
margin-top: 70px;
}
header {
background-color: rgb(146, 59, 60);
width: 1140px;
top: 0;
margin-left: auto;
margin-right: auto;
z-index: 999999;
}
nav {
background-color: #FFF;
width: 1140px;
top: 206px;
margin-left: auto;
margin-right: auto;
z-index: 999999;
}
.laptopPic {
width: 200px;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top:10px;
}
em {
font-size: 0.7em;
}
main {
margin-top: 264px;
}
</style>
</head>
<body>
<div class="container">
<header class="affix">
<div class="row">
<div class="col-xs-6">
<h1 id="heading1" class="text-center"><strong>Nikola Petrović<br /></strong><em>Frontend Developer</em></h1>
</div>
<!--<div class="col-xs-4">
<img src="http://i63.tinypic.com/e6rlzc.png" alt="Laptop.jpeg" class="img-responsive laptopPic">
</div>-->
<div class="col-xs-6">
<img src="https://s9.postimg.org/cm58wdyv3/Nikola.jpg" alt="Nikola.jpeg" class="img-responsive profilPic">
</div>
</div>
<nav>
<div class="row">
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">ABOUT <i class="fa fa-info-circle"></i></h3>
</div>
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">PORTFOLIO <i class="fa fa-folder-open"></i></h3>
</div>
<div class="col-xs-4">
<h3 class="btn btn-block btn-primary">CONTACT <i class="fa fa-envelope"></i></h3>
</div>
</div>
</nav>
</header>
<!--<main>
<div class="row">
<div class="col-xs-12">
<h1 class="about text-center">About</h1>
<hr>
<span class="text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nibh nisi. Suspendisse accumsan risus ac nisl ullamcorper scelerisque. Nam vel nisi interdum, tincidunt eros nec, pellentesque purus. Praesent vitae leo eu elit scelerisque sollicitudin quis sit amet turpis. Donec aliquet pulvinar risus vitae tristique. Pellentesque consectetur, lectus eu tristique efficitur, ex metus vulputate sapien, vulputate scelerisque nunc sem vel nisl. Donec commodo pellentesque eros, eu pulvinar quam varius vitae. Etiam vestibulum tempor leo et ornare.
-->
Can I ask you to download Index.html file on this site: https://www.sendspace.com/file/wvoydy
I have a problem with code pen, there you have everything right.
I want to affix or position: fixed, Header and Nav, but when I do that it;s not responsive anymore
When you try to shrink a screen nothing happens. Picture doesn’t go below the H1 or buttons below the picture
Here is project what it supposed to be but without fixed Header element: https://codepen.io/1Zelenismrad/pen/zRKoqg