how to make a responsive website with mobile app UI-design using HTML,CSS-CodePudding

I'm trying to build some website with mobile app UI/UX using HTML and CSS ..

like a real website but the UI looks like a mobile app ..

if we access to the website on laptop browser the width of UI gonna be same just like on mobile screen .. so I set the width to 480px

so far I make like this .. and even my code is lil bit messy but it gave me just like what I need when I open it on a laptop browser .

but the problem is when I open the website on mobile the width and height it doesn't changed based on the mobile screen ..

I tried to add some CSS I found on google when I did some research but it doesn't give me what I want ..

and here is my HTML script and CSS .. and sorry if it looks so messy .

Because I'm still learning on Front-End and I hope someone can help me and share with me ..

if my explanation is not really clear and cant be understand please tell me so I can add some more explanation with some web example of what I'm trying to build

body{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    background-color: #dee2e6a1!important;
}
section{
    min-height: 100px;
    max-width: 480px;
    min-width: 380px;
    background: white;
}
header{
    background: #e1ecfb;
    padding: 15px;
    padding-top: 30px;
    border-left: 2px solid #7fa1d166;
    border-right: 2px solid #7fa1d166;
}
.produk_list{
    -background: white;
}
.footer{
    position: fixed;
    bottom:0;
    max-width:480px;
    min-width:480px;
    max-height:60px;   /* Height of the footer */
    background:#6cf;
    font-size: 11px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: #e1ecfb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #7fa1d166;
}
.mundur_row{
    font-size: 20px;
    padding-bottom:10px ;
    padding-top:10px ;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #e1ecfb;
    border: 2px solid #7fa1d166;
}
h3{
    text-align: center;
    font-size: 30px;
    margin: 0;
    padding-top: 10px;
}
a{
    text-decoration: none;
}
p{
    text-align: center;
    color: #b2bec3;
    padding: 0 8px;
}
h6{
    font-size: 26px;
    text-align: center;
    color: #222f3e;
    margin: 0;
}
      div {
    text-align: center;
}
input{  
    border: 0;
    width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:disabled{
    background-color:white;
}
.b-dark {
    --bs-bg-opacity: 1;
    background-color: #e1ecfb !important;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://localhost/Ordering-System/assets/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <title>Document</title>
</head>
<style>
/* For desktop: */
.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%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
.buttonn {
  transition-duration: 0.4s;
  -color: white!important;
}

.buttonn:hover {
  background-color: #7fa1d1;
  color: white!important;
}

</style>
<body>
    <section>
        <div class="d-flex flex-row sticky-top mundur_row" style="padding-bottom: 25px;">
        </div>      
        <div class="produk_list">            
<br>
        <br>
        <center style="font-size: xx-large;">Some Large Text </center>
        <br>
        <br>
        <br>
        <br>

            <div class="container-fluid" style="padding-bottom:50px;">
                <div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">
                    <form>
 <div class="card" style="border: 0;">
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 1</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 2</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 3</button>
                                                                <br>
        <br>
        <br>
        <br>
       </div>
       </form>
       </div>
       </div>
       </div>
       <div class="footer" style="height: 60px;">
           
       </div>
</section>
</body>
</html>

CodePudding user response：

As you set some element min-width this is not good practice for responsive design. Please change your code as below.

section{
    ...
    min-width: 380px;
    ...
}

section{
    ...
    width: 100%;
    ...
}

And

<div class="row data_produk" id="data_produk" style="text-align: center;min-width:480px;">

<div class="row data_produk" id="data_produk" style="text-align: center;width:100%;">

body{
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    background-color: #dee2e6a1!important;
}
section{
    min-height: 100px;
    max-width: 480px;
    width: 100%;
    background: white;
}
header{
    background: #e1ecfb;
    padding: 15px;
    padding-top: 30px;
    border-left: 2px solid #7fa1d166;
    border-right: 2px solid #7fa1d166;
}
.produk_list{
    -background: white;
}
.footer{
    position: fixed;
    bottom:0;
    max-width:480px;
    min-width:480px;
    max-height:60px;   /* Height of the footer */
    background:#6cf;
    font-size: 11px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    background-color: #e1ecfb;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #7fa1d166;
}
.mundur_row{
    font-size: 20px;
    padding-bottom:10px ;
    padding-top:10px ;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background: #e1ecfb;
    border: 2px solid #7fa1d166;
}
h3{
    text-align: center;
    font-size: 30px;
    margin: 0;
    padding-top: 10px;
}
a{
    text-decoration: none;
}
p{
    text-align: center;
    color: #b2bec3;
    padding: 0 8px;
}
h6{
    font-size: 26px;
    text-align: center;
    color: #222f3e;
    margin: 0;
}
      div {
    text-align: center;
}
input{  
    border: 0;
    width: 2%;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:disabled{
    background-color:white;
}
.b-dark {
    --bs-bg-opacity: 1;
    background-color: #e1ecfb !important;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://localhost/Ordering-System/assets/css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg p" crossorigin="anonymous"/>
    <title>Document</title>
</head>
<style>
/* For desktop: */
.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%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
.buttonn {
  transition-duration: 0.4s;
  -color: white!important;
}

.buttonn:hover {
  background-color: #7fa1d1;
  color: white!important;
}

</style>
<body>
    <section>
        <div class="d-flex flex-row sticky-top mundur_row" style="padding-bottom: 25px;">
        </div>      
        <div class="produk_list">            
<br>
        <br>
        <center style="font-size: xx-large;">Some Large Text </center>
        <br>
        <br>
        <br>
        <br>

            <div class="container-fluid" style="padding-bottom:50px;">
                <div class="row data_produk" id="data_produk" style="text-align: center;width:100%;margin: 0 auto">
                    <form>
 <div class="card" style="border: 0;">
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 1</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 2</button>
                                                        <button class="button buttonn" name="Cabang" style="border-radius:5px;margin-bottom:10px;color:#41464b;text-decoration:none;">Some Text 3</button>
                                                                <br>
        <br>
        <br>
        <br>
       </div>
       </form>
       </div>
       </div>
       </div>
       <div class="footer" style="height: 60px;">
           
       </div>
</section>
</body>
</html>