Responsiveness problem with an affix slass

Responsiveness problem with an affix slass
0

#1

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='//discourse-user-assets.s3.amazonaws.com/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>

#2

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.


#3

Can you supply a link to your entire project? I can not see which version of Bootstrap you are using and if you have all the necessary JavaScript libraries required to make the Affix functionality work.


#4

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.
-->

#5

I do not see where you have linked to Bootstrap.


#11

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.


#12

OK, now that I have a Codepen with all the code, I can see what is/is not happening when adding/removing the class=“affix” to the header element.

Just so I understand exactly the issue you want to fix, can you describe which part is “not responsive” after the “affix” class is added? I can definitely see a shift down in the About content when it is not added to the header element, but I see that adding affix is an improvement and not a problem.


#13

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


#14

I need you to explain what you mean by “it’s not responsive anymore”. Which part was responsive before adding the affix class that now is not responsive?


#15

When you try to shrink a screen nothing happens. Picture doesn’t go below the H1 or buttons below the picture


#16

From what I can tell from your code, if I leave the affix class off the header or apply it to the header, your header is not responsive. You have given a fixed width to your header, so it is not going to shrink.


#18

When I viewed your Codepen, it did not do what you are showing. If you can update your Codepen to reflect what you have in your index.html file, then I will test it out. I am not downloading a file off another server. Do you have your project on github or is it hosted somewhere? I can check out the source code that way.

All you have to do is put all of the code in your index.html into the html section of the Codepen and delete any external file references in the Code pen settings section. When I looked at the pen you had earlier, you were loading some libraries via the html section and the Codepen settings.


#19

Here is project what it supposed to be but without fixed Header element: https://codepen.io/1Zelenismrad/pen/zRKoqg


#20

OK, now I can see what you are talking about. I was reading through the Bootstrap Affix plugin documentation and do not see an example where affix is assigned to a class attribute of an element (like you are doing with the header element). I suggest you read through the documentation for the Affix plugin and look at all of the examples of how they implement the plugin. This is not something I have used before, so I can not give explicit advice on how to resolve your issue. Give the thread a couple of days to see if someone else responds back with better direction for you.