Reputation: 355

How to make responsive our webpage I mobile view

am stuck with a problem, my webpage is properly responsive in desktop view , but when am trying to view it on moto g4 device web development text goes right direction, I want to make it center in moto g4 view , how to make it center in when I view on moto device

index.html

This is my index.html page where I wrote my whole code

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <title>Website</title>

</head>

<body>

  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm p-3 mb-5"
    style="background-color: #cadefc !important; color:#798777;">
    <div class="container">
      <a class="navbar-brand" href="index.html">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
        style="border: none;">
        <i class="fas fa-bars"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="index.html">Home </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#service">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="price.html">Price</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="team.html">Our Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Navbar End -->



  <!-- banner start -->
  <section class="banner p-5" style="background-color:#f7f7f9">
    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6" data-aos="fade-up" data-aos-duration="3000">

          <img src="./img/1.1.svg" style="width: 100%;">
        </div>
        <div class="col-lg-6 mt-5 text-center">
          <h1 class="text-center">Web Development</span></h1>
          <h5 class="text-center" style="color: lightslategray;">In This digital world if you want to stay ahead
            of your competitors no doubt you need a website.</h5>
          <a href="web.html"><button class=" btn btn-warning border-radius-10" data-aos="fade-right"
              data-aos-duration="2000"
              style="background-color:#cadefc; box-shadow: 0 3px 3px #c3bef0; color: #000; border-color: #c3bef0;">Learn
              More</button></a>
        </div>
      </div>
    </div>
  </section>
  <!-- banner end -->
  <!-- extra header div start -->


  <!-- footer start -->
  <div class="footer bg-dark">
    <p class="text-center text-white mb-0 p-3">© 2021 abc solution All rights reserved.</p>
  </div>
  <!-- footer end -->


  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

Upvotes: 0

Answers (3)

Jeetender Dicky Bal

Reputation: 11

I usually use to do it in JavaScript

And the code is :-

 var ismobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);

If(ismobile)
{
    //Code here
}

The variable is mobile will identify the the user is using mobile or pc And the code which you will write in if will work only on mobile

Upvotes: 0

Shashank Gb

Reputation: 1012

Removing a typo: </span> tag and adding a p-0 to the parent of <h1> i.e., <div> tag makes a trick for me. Unnecessary padding doesn't cause much in larger screens but they will make an impact in smaller screens so I removed the padding

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
    integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <!-- <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> -->
  <title>Website</title>

</head>

<body>

  <!-- Navbar Start -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm p-3 mb-5"
    style="background-color: #cadefc !important; color:#798777;">
    <div class="container">
      <a class="navbar-brand" href="index.html">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
        style="border: none;">
        <i class="fas fa-bars"></i>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item ">
            <a class="nav-link" href="index.html">Home </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#service">Service</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about.html">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="price.html">Price</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="team.html">Our Team</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Navbar End -->



  <!-- banner start -->
  <section class="banner p-5" style="background-color:#f7f7f9">
    <div class="container mt-5">
      <div class="row">
        <div class="col-lg-6" data-aos="fade-up" data-aos-duration="3000">

          <img src="./img/1.1.svg" style="width: 100%;">
        </div>
        <div class="col-lg-6 mt-5 p-0 text-center">
          <h1 class="text-center">Web Development</h1>
          <h5 class="text-center" style="color: lightslategray;">In This digital world if you want to stay ahead
            of your competitors no doubt you need a website.</h5>
          <a href="web.html"><button class=" btn btn-warning border-radius-10" data-aos="fade-right"
              data-aos-duration="2000"
              style="background-color:#cadefc; box-shadow: 0 3px 3px #c3bef0; color: #000; border-color: #c3bef0;">Learn
              More</button></a>
        </div>
      </div>
    </div>
  </section>
  <!-- banner end -->
  <!-- extra header div start -->


  <!-- footer start -->
  <div class="footer bg-dark">
    <p class="text-center text-white mb-0 p-3">© 2021 abc solution All rights reserved.</p>
  </div>
  <!-- footer end -->


  <script src="index.js"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

</html>

Upvotes: 2

AJ Kilmurray

Reputation: 56

You have a closing <span> tag within the h1 element you're referring to, while it has no opening <span> tag.

<h1 class="text-center">Web Development</span></h1>

Should be:

<h1 class="text-center">Web Development</h1>

Upvotes: 1

How to make responsive our webpage I mobile view

Answers (3)

Related Questions