How do I make my website look better on mobile devices?-CodePudding

I created a basic website to improve my front-end skills. I used Bootstrap 5 to make it responsive but it does not look good on the phone. Can somebody tell me what I did wrong? On my mobile device, it looks like this :

enter image description here

When I decreased the size of the browser, it looked good, but when I put it online on github, it looks like the page has been cut.

Html :

<!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">
  <title>Ping</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>
<body style="overflow-x: hidden;">
  <div >
    <div >
      <img src="./images/logo.svg">
    </div>
  </div>

  <div >
    <div >
      <h1 >We are launching<span > soon!</span></h1>
    </div>
  </div>

  <div >
    <div >
        <span >Subscribe and get notified</span>
    </div>
  </div>

  <div >
    <div >
    <div>
      <form >
        &nbsp<input  id="email" placeholder="Your email adress...">&nbsp
        <button type="button" id="submit">Submit</button>
      </form>
      <p ></p>
    </div>
    </div>
  </div>

  <div >
    <div >
      <img src="./images/illustration-dashboard.png" >
    </div>
  </div>

  <footer >
    <div >
      <a href="https://pt-br.facebook.com/"><i ></i></a>&nbsp&nbsp
      <a href="https://twitter.com/"><i ></a></i>&nbsp&nbsp
      <a href="https://www.instagram.com/"><i ></a></i>
    </div>
    <div >
      <p>&copy; Copyright Ping. All rights reserved.</p>
    </div>
  </footer>
















  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>
</html>

css:

#email{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    width: 330px;
    height: 45px;
    border-color: gainsboro;
}

#submit{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    width: 150px;
    height: 48px;
    background-color: blue;
    color: white;
    border: none;
}

#submit:hover{
    background-color: rgb(124, 111, 204);
}

.firstp{
    padding-right: 55px;
}



.imgdash{
    width: 100%;
    max-width: 400px;
    height: auto;
}

CodePudding user response：

Add flex-wrap and justify-content-center class on form element, will resolve your issue. Also add mb-2 class on both input and button element.

Below code snippet also updated and i hope it'll resolve your issue. Thank You

#email {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 330px;
  height: 45px;
  border-color: gainsboro;
}

#submit {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  width: 150px;
  height: 48px;
  background-color: blue;
  color: white;
  border: none;
}

#submit:hover {
  background-color: rgb(124, 111, 204);
}

.firstp {
  padding-right: 55px;
}

.imgdash {
  width: 100%;
  max-width: 400px;
  height: auto;
}

<!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">
  <title>Ping</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.css" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/brands/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/regular/" rel="stylesheet">
  <link href="/fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/svgs/solid/" rel="stylesheet">
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</head>

<body style="overflow-x: hidden;">
  <div >
    <div >
      <img src="./images/logo.svg">
    </div>
  </div>

  <div >
    <div >
      <h1 >We are launching<span > soon!</span></h1>
    </div>
  </div>

  <div >
    <div >
      <span >Subscribe and get notified</span>
    </div>
  </div>

  <div >
    <div >
      <div>
        <form >
          &nbsp<input  id="email" placeholder="Your email adress...">&nbsp
          <button  type="button" id="submit">Submit</button>
        </form>
        <p ></p>
      </div>
    </div>
  </div>

  <div >
    <div >
      <img src="./images/illustration-dashboard.png" >
    </div>
  </div>

  <footer >
    <div >
      <a href="https://pt-br.facebook.com/"><i ></i></a>&nbsp&nbsp
      <a href="https://twitter.com/"><i ></a></i>&nbsp&nbsp
      <a href="https://www.instagram.com/"><i ></a></i>
    </div>
    <div >
      <p>&copy; Copyright Ping. All rights reserved.</p>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
  <script src="script.js"></script>
  <script src="https://kit.fontawesome.com/9b452e5ad1.js" crossorigin="anonymous"></script>
</body>

</html>

CodePudding user response：

What I can see is you are using a lot of .col . You need to specify .col for small and large devices. Otherwise some of it's function will break. Take a look at this link: https://getbootstrap.com/docs/5.0/layout/columns/#column-breaks You see in this link that there are many sm modifier used. Use them and you can see some results.

CodePudding user response：

I think this should be a simple fix for you if you specify the css rules for each viewport width (this is w/o JS.

Did you try @media while specifying a min-width for each resolution size you're looking to have it come up on?