Good afternon. Problem with the responsive part for mobiles on my website

Good afternon. Problem with the responsive part for mobiles on my website
0.0 0

#1

Hello everyone. I am having this problem with my website. I am trying to make it responsive for mobiles, however the paragraphs, icons and titles have mixed each other and I do not know how to fix it. On the other hand, the website looks awesome on deskop (computer and tablets) screems. Any advice, help, would be welcome.

Thank you for time and attetion.

Cheers.


#2

Please either copy/paste your code into a reply to this post or put your code in an online site such as Codepen or jsFiddle and give us the link.

If you end up copying/pasting your code into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Thank you for response mr Dawwon. Here is my code with three backticks on the html part as well as the stylesheet.

      <!DOCTYPE html>
      <html lang="en">
      <head>
        
        <title> BUSINESS SOLUTIONS & SOFTWARE LIMITED</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/png" href="images/favicon">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
        <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 

    <style>
    body {
        font: 20px Montserrat, sans-serif;
        line-height: 1.8;
        color: #f5f6f7;
    }
    .bgimg-2 {
      background-image: url(images/img2.jpg);
      height: 400px;
      width: 100%;
      background-size: 100% 100%;
      border: 1px solid;
    }
    .caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
  }

  .caption span.border {
    opacity: 0.6;
    background-color: #111;
    color: #fff;
    padding: 18px;
    font-size: 25px;
    letter-spacing: 10px;
  }
    p {font-size: 16px;}
    .margin {margin-bottom: 45px;}

    .bg-1 { 
        background-color: #1abc9c; /* Green */
        color: #ffffff;
      
    }
    .bg-5 {
     background-image: url(images/img31.jpg);
        height: 600px;
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;

    }
    .bg-6 {
        height: 470px;
        width: 100%;
        background-size: 100% 100%;
        background-repeat: no-repeat;

    }
    
    .bg-2 { 
        background-color: #E4E6ED; /* Dark Blue */
        color: black;
    }
    .bg-3 { 
        background-color: #ffffff; /* White */
        color: #555555;
    }
    .bg-4 { 
        background-color: #040C22; /* Black Gray */
        color: #fff;
    }

    .container-fluid {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .navbar {
        padding-top: 15px;
        padding-bottom: 15px;
        border: 0;
        border-radius: 0;
        margin-bottom: 0;
        font-size: 12px;
        letter-spacing: 5px;
    }
    .navbar-nav  li a:hover {
        color: #1abc9c !important;
    }
    .navbar-brand {
      background-image: url(images/Bussines-solutions--software.png);
      background-position: left top;
      background-size: 55px 55px;
      background-repeat: no-repeat;
    }
    .hola { 
       border-style: solid;
       width: 30%;
       position: center;
       text-align: center;
       
     }
     .why { 
       border-style: solid;
       width: 20%;
       position: center;
       text-align: center;
       
     }
     .indus { 
       border-style: solid;
       width: 20%;
      
     }
     .contact {
      border-style: solid;
      width: 35%;
     }


     
    </style>
     </head>

     <body>

     <!-- Navbar -->
     <nav class="navbar navbar-default">
       <div class="container">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>                        
           </button>
           <a class="navbar-brand" href="#">__</a>
         </div>
         <div class="collapse navbar-collapse" id="myNavbar">
           <ul class="nav navbar-nav navbar-right">
             <li><a href="#HowWeWork">HOW WE WORK</a></li>
             <li><a href="#WhyUs">WHY US</a></li>
             <li><a href="#Industries">INDUSTRIES</a></li>
             <li><a href="#Address">ADDRESING YOUR NEEDS</a></li>
             <li><a href="#GetInTouch"><i class="fa fa-envelope-o" aria-hidden="true">GET IN TOUCH</i></a></li>

           </ul>
         </div>
       </div>
     </nav>

     <!-- First Container -->
     <div class="container-fluid bgimg-2">
       <div class="caption"> 
       <span class="border" "> BUSINESS SOLUTIONS & SOFTWARE LIMITED</span>
       </div>  
     </div>

     <!-- Second Container -->
     <div class="row">
     <div class="container-fluid bg-2 bg-6 text-center">
       <center><h3 class="margin indus">How we work</h3></center><a id="HowWeWork"></a>
       
       <div class="col-sm-3"> 
       <i class="fa fa-user fa-2x" aria-hidden="true"></i>
       <p>  
     1. Understanding your business challenge <br>
         - We will explore your business needs with you. No need to write any technical specification upfront. </p>
       </div>
     <div class="col-sm-3">
     <i class="fa fa-code fa-2x" aria-hidden="true"></i> 
     <p>
     2. Creating and managing the project
         - We will transform your business challenge into an IT project. You don't need your own CTO or any Project Manager. </p> 
       </div>
     <div class="col-sm-3">
     <i class="fa fa-lightbulb-o fa-2x" aria-hidden="true"></i> 
     <p>
     3. Developing tech solution <br>
         - We will implement technical products to address your business needs. We will make sure the standards are held high. </p>
       </div>
     <div class="col-sm-3"> 
       <i class="fa fa-home fa-2x" aria-hidden="true"></i>
     <p>
     4. Running and maintaining the product
         - We will cover whole life cycle of the product for you. Alternatively, we will help you to hire your own in-house team.</p> 
       </div>
       <br>
       <div class="col-sm-12">
       <a href="#GetInTouch" class="btn btn-default btn-lg">

         <span class="glyphicon glyphicon-search"></span> Get in touch
       </a>
     </div>
     <br>
       </div>
     </div>
     </div>
     <!-- Third Container (Grid) -->
   <div class="row">
     <div class="container-fluid bg-3 text-center" style="color: black">    
       <center><h3 class="margin why"> <strong>Why us?</strong></center></h3><a id="WhyUs"></a>
       <div class="row">
         <div class="col-sm-3 col-md-4">
           <p> We embrace Agile
         - We breath for Agile. We understand that IT project cannot be planned years ahead.</p>
         
           <img src="images/clock.jpg" class="img-responsive" style="width:100%">
         </div>
         <div class="col-sm-3 col-md-4"> 
           <p> We work very closely with our clients
         - We will discuss the project quite frequently. Be prepared to be a true part of our team.</p>
       
           <img src="images/img12.jpg" class="img-responsive" style="width:100%">
         </div>
         <div class="col-sm-3 col-md-4"> 
           <p> We understand business challenges
         - Our team members have background in economics, corporate governance, finance and other business disciplines. We speak your language.</p>
           <img src="images/img3.jpg" class="img-responsive" style="width:100%">
          </div>
       </div>
     </div>
   </div>  
     <!--Industries -->
     
     <div class="container-fluid bg-2 bg-5 text-center" style="color: black;">
      <center><h3 class="margin indus">Industries</h3></center><a id="Industries"></a>
       <p>
     Our experts have taken part in projects (not only) in these industries:
      <br>
      Banking
     <br>
      Insurance
     <br>
      E-commerce
     </p>

       
     </div>

     <!-- Addresing your needs -->

     <div class="container-fluid bg-3 text-center " style="color: black;">    
       <center><h3 class="margin hola">Addressing your needs</h3></center><a id="Address"></a>
       <div class="row">
         <div class="col-sm-3 col-md-3">
           <p> Open Banking
         - We will help you to gain from the APIs provided by the Open Banking initiative.
     </p>

         </div>
         <div class="col-sm-3 col-md-3"> 
           <p> PSD2
         - We are closely monitoring changes coming with PSD2 regulation. We are here to help you to implement solutions leveraging PSD2.</p> 
     </div>
         <div class="col-sm-3 col-md-3"> 
           <p> GDPR
         - We understand that complying with a new EU regulation can be tricky. We will navigate your through the implementation process.</p>
           
         </div>
          <div class="col-sm-3 col-md-3"> 
           <p> PCI/DSS
         - If you are building any platform concerned with payments, you might need our help to comply with PCI/DSS standards.</p>
           
         </div>
       </div>
     </div>

     <!-- Footer -->
     <footer class="container-fluid bg-4 text-center">  <a id="GetInTouch"></a>
        <center><h3 class="hola"> Getting in touch</h3></center> 
       <p>
       <br>
     * Call us:   545323
     <br>
     * Write us:  email
     <br>
     * Skype us:  skype nickname</p> 
     <img src="images/Bussines-solutions--software.png">
     </footer>

     </body>
     </html>