Bootstrap: responsive card

Question

I'm trying to recreate a card just like this one from WIX using bootstrap. I have 2 problems:

Only at full screen the card touches the contact bar, when I reduce the size the card starts floating like this. (EDIT: solved this problem)
I would like the card to become vertical (text below photo) when the screen becomes to small. (EDIT: solved this problem)

UPDATE: I still have a problem with responsiveness: when the screen becomes smaller my text doesn't fit nicely and the photo of my head is cut in half on the top like this on in Ipad and like this on a phone.

This is how a part of my html and css looks like:

    .grid-container{
    display: grid;
    grid-template-rows: 580px 75px 405px;
    width: 100vw;
}
    .grid-item-contact{
    background-color: #efefef;
    display: grid;
    grid-template-columns: 25% 50% 25%;
}



    
    
    
        
            
                
                    
                
                
                    
                        Quinten KJ
                        Master student financial engineering
                        This is text
                        Last updated 3 mins ago

Rayees AC · Accepted Answer

Please try this.. later i add the description for all..

Iam using col-md-6 instead of col for medium and small devices alignment. And order property use to change order of card text and card image. Some media queries(640px and 480px) used to align correct grid-container and also add some padding to grid-item-hello for small devices.

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/*--body--*/
body {
    overflow-x: hidden;
    font-family: 'Open Sans', sans-serif;
    background-color: #efefef;
    background-repeat:no-repeat;
}

/*--navbar--*/
.navbar{
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
}

.navbar-nav li {
    padding-right: .7rem;
}

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #bfbfbf;
}


/*-- slider --*/

.carousel-item {
  height: 100vh;
  width: 100vw;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-caption{
    position: absolute;
    top: 68%;
}

.carousel-caption h2{
    font-size: 2rem;
    letter-spacing: .1rem;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 1rem;

}

.carousel-caption h5{
    font-size: 1.5rem;
    letter-spacing: .1rem;
    text-shadow: .1rem .1rem .3rem black;
    padding-bottom: 1.3rem;

}

.btn-lg{
    border-width: medium;
    font-size: 1.1rem;
}

/*--about--*/

.grid-container{
    display: grid;
    grid-template-rows: 520px 60px 310px;
    width: 100vw;
}

.grid-item-card{
    align-self: end;
}

.grid-item-contact{
    background-color: #efefef;
    display: grid;
    /*--grid-template-columns: 490px 940px 490px;--*/
    grid-template-columns: 15% 70% 25%;
}

.grid-item-hello{
    background-color: #efefef;
    text-align: center;
    color: #636769;
}

.helloTitle{
    margin-top: 90px;
    margin-bottom: 20px;
}

.helloText{
    margin-bottom: 10px;
}

@media only screen and (max-width: 640px) {
  .grid-item-hello{
    padding:0 20px;
  }
  .grid-container{
    grid-template-rows: 680px 60px 300px;
  }
}

@media only screen and (max-width: 480px) {
  .grid-container{
    grid-template-rows: 580px 60px 400px;
  }

}







  
  
  

  
  
  

  About



  
  
    
      Quinten KJ
      

      
        
          
            Home
          
          
            About
          
          
            CV
          
          
            Contact
          
        
      
    
  

  
  
    
    
      
        
          
            
          
          
            
              Quinten KJ
              Master student financial engineering
              This is text
              Last updated 3 mins ago
            
          
        
      
    
    
    
      
      
        
        
        
      
      
    

    
    
      Hello, I'm Quinten!
      "I'm a greater believer in luck, and I find the harder I work the more I have of it" 
      - Thomas Jefferson -
      
      
      I'm a master student financial engineering at the University of Antwerp.

Bootstrap: responsive card

Answers (1)

Related Questions