Web Site Designing for Mobile

I'm not sure how the IPhone/iPod Touch declare themselves when requesting the stylesheet, but for most, using

<style type="text/css">
    @media handheld
    {
      /* handheld styles */
    }
</style>

should do the trick. It works in the same way @media print does (or doesn't).

For a complete list of media types, see here.

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

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/bootstrap@5.1.1/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>

Website renders like desktop on mobile, only when first loaded or is refreshed

The issue was with Chakra UI's useMediaQuery() hook. Writing a custom hook solved this issue


const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);

  return matches;
}

export default useMediaQuery;

Web Site Designing for Mobile

Web Site Designing for Mobile

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

Website renders like desktop on mobile, only when first loaded or is refreshed

Related Topics

Leave a reply