My portfolio web is almost finished...two problems

Code Feedback
1

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

HTML

<head>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="container-fluid responsive">
    
  <header>  
  <nav class="border navbar navbar-fixed-top container-fluid" role="navigation">
<div id=”navegador”>  
<img class="logclass" src="https://preview.ibb.co/g3LSxv/logotipo_1.png" alt="logotipo_1" border="0">
<ul>
  <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>
</ul>
    </nav>
    </header>
</div>
    </div>
</head>

<body> 
  <div class="container-fluid responsive">
         
<link href="https://fonts.googleapis.com/css?family=Cherry+Cream+Soda" rel="stylesheet">
      
  <div class="one" id="pr">
  <h1>BEYOND THE ARCHETYPE</h1>
  <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"> 
    
  <h2>Portfolio of Verónica Almeneiro</h2>
  </div>
  <img class="blue-border img-responsive" align="right" src="https://upload.wikimedia.org/wikipedia/commons/6/63/Code_vmc2015.png" 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>
      
 <div class="three" id="proo">
  <h4>Portfolio</h4>
   <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="https://codepen.io/Veroac/full/dRWPLa/"><img class="img2 img-responsive" src="https://image.ibb.co/erWKLF/minitolk.jpg" alt="minitolk"></a>
      
      <div class="caption">
        <h5>Web tribute Tolkien</h5>
      </div>
    </div>
    
        <div class="four">
          <h6 id="proof"> Lets contact!</h6>
          
	<form action="mailto:vero.almeneiro@hotmail.com" 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">
<strong>Message</strong></p></td></tr>
<tr>
<td align="center" colspan="10">
<textarea name="Message:" cols="30" rows="8" style="monospace"></textarea>
</td>
</tr>
<tr>
<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>
</tr>
</table>
</form>
          
<div id="icons">
  <a href="https://codepen.io/Veroac" target="_blank"><i class="iclass2 fa fa-codepen"></i></a>
<a href="https://www.linkedin.com/in/ver%C3%B3nica-almeneiro-calvo-81722081/?ppe=1" target="_blank"><i class="iclass2 fa fa-linkedin"></i></a>
  <a href="https://github.com/veroac"><i class="fa fa-github"></i></a><p class="p-sign">Written and code by Verónica Almeneiro</p>
          </div>
  </div>
     </div>
 
  </div>
   
  </body>

CSS

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


body{
  margin:0;
  padding:0;
  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;
text-align:center;
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 {
    float:left;
}

nav a {
    float:left;
    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

https://codepen.io/Veroac/pen/awEWaJ

Thank you a lot for reading! :slightly_smiling_face:

—Update----

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.

2

About:

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

3

veroac
1m

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