Building Section with Responsive Column

Building Section with Responsive Column

Building Section with Responsive Column. In this article we will step into how to divide website into section , and then segregate the section in row. while in each single row , we will allocate column, and make it responsive.

The Good practice, when we try to divide our website into section is by using a DIV tag. A Class name of a container is to be assign to the DIV tag, this will facilitate us when we try to implement general styling to all element in the section.

To do this , we will need to code some HTML and CSS.

Refer the Step by step below on how to do it

1. Create a Container for the Section using a Div Tag in HTML. I assign an Id gradient as i would like a background colour with gradient feature which i will style in later steps

        <div class="container" id="gradient">
       
    
        </div>

        

2. Create a General Style for your Container in CSS. Give it a Width of 100% to cover everything. You would want your content to be place in the center so set margin to auto. Your content will start 4% below the top and 4% on top of the bottom so give it a padding 4% for both top and bottom

         .conatainer{
    
                     width:100%;
                     margin:auto;
                     padding-top: 4%;
                     padding-bottom: 4%;
    
    
                     }

        

3. Style your background Gradient colour.in CSS. Provide your back ground Color a height of 500px. Input your gradient setting to Learn more about gradient click here

         #gradient{
    
                              height: 500px;
                              background: red; /* For browsers that do not support gradients */
                              background: linear-gradient(to bottom right, red, yellow); 
    
   
    
                              }


        

4. Next step is to Create Rows in side your Container in HTML

         <div class="container" id="gradient">
              <div class="row">
        
            
        
              </div>
  
    
         </div>

       

5. Style your Row in CSS. Give your Row a width of 100%. you would want your row to be mobile flex,When the browser shrink you would want the content to wrap up, and all the object in center. After every single row you want the element to behave like a table, you would not want any element to float around so set Clear:both. and no content to be display after a row , content:””; . check out what is ::after click here and check out what is clear click
   here

         .row{
    
              width:100%;
              display:flex;
              flex-wrap: wrap;
              align-items: center;  
    
              }
        .row::after{
    
              display:table;
              clear: both;
              content:"";
     
                    }

       

6. Divide the row section into Columns using HTML. In this example i set 2 Column with both 50% width.The setting of the Width in CSS will be done in the next step. I set a child class “leftside” as i wanna segregate my column styling

        <div class="container" id="gradient">
          <div class="row">
        
              <div class="col-6 leftside">

              </div> 
              <div class="col-6">
           
              </div>
           </div>
       </div>  


        

7. Style all Column width in CSS

         .col-1 {width: 8.33%};
         .col-2 {width: 16.66%;}
         .col-3 {width: 25%;}
         .col-4 {width: 33.33%;}
         .col-5 {width: 41.66%;}
         .col-6 {width: 50%;}
         .col-7 {width: 58.33%;}
         .col-8 {width: 66.66%;}
         .col-9 {width: 75%;}
         .col-10 {width: 83.33%;}
         .col-11 {width: 91.66%;}
          .col-12 {width: 100%;}

       

8. I want my first Column content to be display on the left side .

          
        .leftside{
    
                  margin-left: 10%;
    
                  }
        

9. Now you can start adding content to your section Structure.A row with 2 column reside inside .

Well this wrap up the article on Building Section with Responsive Column

Check out on how to create a responsive nav bar here