Scroll button not centered

Question

I have been trying to work with bootstrap 4 for my graphic design portfolio, but things aren't going as planned. I have a lot of problems positioning elements, as mx-auto class doesn't always work, neither does align-items-center on parent divs or align-self-center. I do not know what I am doing wrong, but I have tried every combination to make the homepage with the "tahan grafica e fotografia" as showed, but vertically centered. As I couldn't reach the same result with classes, I just moved them with position relative. The result achieved is the same, but in terms of coding I am pretty sure it's not the way I should go. The same happened with the two scrolls, the black and the white one. They are where they are supposed to be, but they have been placed there manually with position relative. Could someone help me? I don't understand what I am doing wrong when using classes. I think one of the problems is that I don't get when I should create a div and when not. For example, I have my container fluid, I have the row, should I place the logo image and the other two texts without a div? If not, why should I create it? Thank you.

    
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      Tahan
    
    
    
      
      
        
          
            
              
              
                
                  grafica
                
                
                  fotografia
                
              
            
          
          
            
              
            
          
        
      
      
      
        
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
            
          
          
          
            alcu
ne parti di me

My css:

/* Mobile first (phones/tablets, 0 and up) */
    html {
      font-size: 16px; /* valore consigliato 16px, 1rem è uguale a questo valore */
  scroll-behavior: smooth;
}

body {
  background-color: #ffffff;
  color: #000000;
}


.full-height {
  height: 100vh;
}

.header {
  position: relative;

}
.logo {
  position: relative;
  top:120px;
  width: 170px;
}

.logo-subtext span {
  width: 48%;
  font-family: Arial;
  font-size: 19px;
  position:relative;
  top:-15px;

}

.scroll{
  max-height: 30px;
  max-width: 30px;
}

#blackscroll{
  position: relative;
  top:200px;
}

.parts-cont {
    background-color: black;
  }
.partsofme {
  position: relative;
  padding-top: 15px;
  padding-bottom: 20px;
}


.partidime{
  color: white;
  font-size:110px;
  font-family: 'Karla', sans-serif;
  text-align: left;
  line-height: 90px;
  position: absolute;
  top:120;

}

#inserto1{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: medium;
  font-size: 140px;
}

#inserto2{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: medium;
  font-size: 110px;
}

.chi-cont{
  background-color: black;
  display: inline-block

  }

  .chisono{
    background-color: black;
    display: inline-block

    }
.biography p{
  font-family: Karla;
  font-size: 16px;
  text-align: left;
  color: white;
  line-height: 20px;
  margin-bottom: 0;
    }

#cv{
  font-weight: bold;
  }
.
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .partidime{
    font-size:300px;
    text-align: left;
    line-height: 230px;
    z-index: 9;
  }


  #inserto1{
    font-size: 300px;
  }

  #inserto2{
    font-size: 300px;
  }


}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
  .logo {
    width: 260px;
  }

  .full-height{
    max-height: 100vh;
}

  .logo-subtext span {
    width: 48%;
    font-size: 30px;

  }

  .partsofme {
    padding-top: 150px;
    padding-bottom: 50px;
  }
  .partidime{
    font-size:120px;
    text-align: center;
    line-height: 90px;
    position:static;
  }

  .partidime br {
    display: none;
  }

  #inserto1{
    font-size: 150px;
  }

  #inserto2{
    font-size: 120px;
  }

  .biography p{
    line-height: 30px;
      }

    #blackscroll{
      position: relative;
      top:300px;
      }

    #whitescroll{
        position: relative;
        top:150px;
        }

}

user_13414130 · Answer

try changing the css i am confused how your divs are linked you are using classes and id's on @ keys

Scroll button not centered

1 Answers