My portfolio web is almost finished...two problems

Hi everyone!

My portfolio page is almost finished but I have two problems:

The web looks well in pc screens but in smartphones screen is a disaster…I have tried with responsive class, but not work

The second problems is that the buttons of the navbar dont go to the exact site of the web, for example when I clik in “about” button I can see the text but no the title of that part.

My code is this



  <link rel="stylesheet" href="">
  <div class="container-fluid responsive">
  <nav class="border navbar navbar-fixed-top container-fluid" role="navigation">
<div id=”navegador”>  
<img class="logclass" src="" alt="logotipo_1" border="0">
  <li><a class="aclass" href="#pr" title="Home"><i class="iclass fa fa-home"></i>Home</a></li>
<li><a class="aclass" href="#pro" title="About"><i class="iclass fa fa-address-card"></i>About</a></li>
<li><a class="aclass" href="#proo" title="Portfolio"><i class="iclass fa fa-edit"></i>Portfolio</a></li>
<li><a  class="aclass" href="#proof" title="Contact"><i class="iclass fa fa-envelope"></i>Contact</a></li>

  <div class="container-fluid responsive">
<link href="" rel="stylesheet">
  <div class="one" id="pr">
  <link href="" rel="stylesheet"> 
  <h2>Portfolio of Verónica Almeneiro</h2>
  <img class="blue-border img-responsive" align="right" src="" alt="fotocv_copia">
  <div class="two" id="pro">
    <h3>About me</h3>
  <p class="pclass">Professional of Human Resources, actually learning code. I love learn, every day is a oportunity for learn something new.</p></h3>
 <div class="three" id="proo">
   <p class="pclass">This is my work until now</p>
   <div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <a href=""><img class="img2 img-responsive" src="" alt="minitolk"></a>
      <div class="caption">
        <h5>Web tribute Tolkien</h5>
        <div class="four">
          <h6 id="proof"> Lets contact!</h6>
	<form action="" method="post" enctype="text/plain">
<table bgcolor="#dec1eb" border="0" cellpadding="2" cellspacing="2" align="center" width="300" height="200">
<tr><td colspan="2"><p style="font-size:18px; font-family:monospace; color:black" align="center">
<td align="center" colspan="10">
<textarea name="Message:" cols="30" rows="8" style="monospace"></textarea>
<td align="center"><input class="mbottons" type="submit" value="Send" align="middle"></td>
<td align="center"><input class="mbottons" type="reset" value="Cancel" align="middle"></td>
<div id="icons">
  <a href="" target="_blank"><i class="iclass2 fa fa-codepen"></i></a>
<a href="" target="_blank"><i class="iclass2 fa fa-linkedin"></i></a>
  <a href=""><i class="fa fa-github"></i></a><p class="p-sign">Written and code by Verónica Almeneiro</p>


header {
  background: rgba(0,0,0,0.9);
  width: 100%;
  position: fixed;
  z-index: 100;

  color:#666; background-color: #a9b4f0;}

h1 {font-family: 'Cherry Cream Soda', cursive; font-size: 50px; color: #f22e46; text-align: center;  margin:0px 50px 10px 50px; padding:200px 50px 0px 50px;}

h2 {font-family: 'Dancing Script', cursive; text-align: center; font-size: 32px; color: black; background-color: #a186dc;margin: 0px 50px 300px 50px;}

.border {border-color: #7a4dde;   border-width: 0px; border-style: solid; background-color: #7a4dde;}

.border1{border-color: #ddcdf1;   border-width: 10px; border-style: solid; background-color: #ddcdf1; margin:0px 50px 0px 50px;}

li {display:inline;
margin:0 10px 0 0}

.aclass{padding: 7px 7px 7px 7px;
   color: black;
   background-color: #eeeeee;
   border: 1px solid #ccc;
   text-decoration: none; font-size:20px }

ul {list-style-type:none;
text-align:right; }

h3 {Font-size: 25px; margin-left: 50px; color: black; font-family: monospace;margin: 18px 0px 20px 0px; padding:20px; }

.pclass{font-family: monospace; font-size: 20px; margin:10px 0px 0px 60px; ; text-align: left; color: black;}

h4 {Font-size: 25px; margin-left: 50px; color: black; font-family: monospace; margin: 18px 0px 0px 10px; padding:10px;}

h5 {Font-size: 18px; margin-left: 50px; color: black; font-family: arial; margin:10px 0px 150px 160px ; padding:0;}

h6 {Font-size: 25px; margin-left: 50px; color: black; font-family: monospace; margin:0px 0px 0px 0px; padding:20px;}

img {margin-right: 120px; width: 120px;  margin-top: 25px; display:inline-block;}

.img2 {margin-left: 120px; width: 250px;  margin-top: 25px; display:inline-block;}

.blue-border {width: 200px;}

.one {
    background-color: #a186dc;
    height: 400px; margin:0px 60px 0px 60px;

.two {
    background-color: #dec1eb;
    height: 400px; margin:0px 60px 0px 60px;

.three {
    background-color: #a186dc;
    height: 410px; margin:0px 60px 0px 60px;}

.four {background-color: #dec1eb;
    height: 500px; margin:0px 0px 0px 0px}    

#icons {
text-align: center; color: black; margin: 40px 10px 20px 10px; font-size: 30px;}

nav  {
    display: block;
    width: 100%;
    overflow: hidden;

nav ul {
    margin: 10px 30px 10px 10px;
    padding: .7em;
    float: right;
    list-style: none;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: .5em;    
    box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.8) inset; 

nav li {

nav a {
    padding: .8em 1.5em;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #ccc #999 #eee;
    background: #71c6d3;
    background: linear-gradient(#f5f5f5, #71c6d3);            
nav a:hover, nav a:focus {
    outline: 0;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #fac754;
    background: linear-gradient(#ae68ef, #902fe9);

nav a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
nav li:first-child a {
    border-left: 0;
    border-radius: 4px 0 0 4px;            

nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            

.iclass {margin: 0px 3px 0px 0px}

.iclass2 {margin: 50px 20px 0px 0px}

.logclass {margin: 0px 0px 0px 5px}

.mbottons {Font-size: 20px; font-family: monospace;  color: black;}

.p-sign {font-family: Arial; font-size: 15px; margin: 30px 10px 10px 20px; color: grey}

And this is the portfolio web

Thank you a lot for reading! :slightly_smiling_face:


I have delete the element <div class="container-fluid responsive"> in head and body and the result is the same. Definitely this element dont work.


“The second problems is that the buttons of the navbar dont go to the exact site of the web, for example when I clik in “about” button I can see the text but no the title of that part.”

I had the same problem. What I did is add padding to the top of the section. For example, I have an about, portfolio and contact section and this css:

#about, #portfolio, #contacto {
   padding: 75px;

And about the responsiveness problem, why don’t you use bootstrap rows and columns?

By the way, this is my portfolio.


Thanks for the answer :slightly_smiling_face: has been very usefull to me. I was able to solve the problem with the bottons, now I am working in the problem with de responsive class. :thinking:.