Thiết kế website giá rẻ

Question

I have attempted to add the tag to my HTML document to make my webpage responsive, but I have not been successful. Specifically, I included the following meta tag within the section of my HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Despite this, my webpage does not seem to be responsive, and it does not adjust properly to different screen sizes and devices. The layout and design elements are not behaving as expected on smaller screens, such as mobile devices or tablets.

I have also tried some basic CSS techniques, but I am not sure if I am applying them correctly or if I am missing something important. I understand that media queries, flexible grid layouts, fluid units, and responsive images play crucial roles in achieving a responsive design, but my implementation attempts have not yielded the desired results.

I am looking for any additional solutions, techniques, or best practices that could help me make my webpage responsive. Specifically, I would like to know:

Are there any common mistakes or oversights that I might be making with the viewport meta tag or my CSS?
What are the best practices for using media queries and flexible grid layouts effectively?
How can I ensure that images and other media adjust appropriately to different screen sizes?
Are there any reliable frameworks or libraries that can simplify the process of making my webpage responsive?
What are some useful tools or methods for testing and debugging responsiveness across different devices and screen sizes?
Any advice, resources, or examples that could help me resolve these issues and achieve a truly responsive design would be greatly appreciated. Thank you in advance for your assistance!

https://hbostan1.github.io/test-website1/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body{
    background-color: #cec9cc;
}



/* Style the header */
.header {
    background-color:   #cec9cc;
    width: 100%;
    display: flex;
    align-items: center;  /* Center items vertically */
    justify-content: space-between; /* Space out items */
    padding: 10px 20px; /* Padding inside the header */
}

/* Style the logo image */
.header img {
    width: 150px;
    height: 150px;
}

/* Remove default list styles and make the list horizontal */
.header-menu {
    list-style-type: none; /* Remove bullet points */
    display: flex; /* Use flexbox to arrange items horizontally */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}


.header-menu li{
    margin-left: 20px;
}

/* Style the links */
.header-menu li a {
    color: #fff; /* Link color */
    transition: color 0.4s, transform 0.3s; /* Smooth transition for color and transform */
    font-size: 20px;
    text-align: center; /* Center the text */
    padding: 14px 20px; /* Padding for the links */
    text-decoration: none; /* Remove underline */
}

.header-menu li a:hover {
    color:      #3e2723;
    border-radius: 20px;
}

.banner{
    height: 100px; /* Adjust the height as needed */
    display: flex; /* Use flexbox for banner content */
    flex-direction: column; /* Arrange content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center text alignment */
}

.banner h2, p{
    color: #722b3f;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    padding: 10px;
}

.banner h2{
    font-size: 28px;
}

.banner p{
    font-size: 12px;
}

.services{
    text-align: center;
    padding: 5px 0;
    margin-bottom: 20px;
}

.main{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    margin-top: 40px;
}

.services img {
    border-radius: 0%;
    transition: height 1s, transform 1s;
  }

  .services img:hover {
    transform: scale(1.3); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }


 p{
    padding: 5px;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}



.about-us h3{
    text-transform: uppercase;
    text-decoration: underline;
    padding-left: 20px;
    padding-top: 5%;
    font-size: 26px;
}

.about-us p{
    padding-top: 15px;
    padding-left: 20px;
    font-weight: normal;
    font-size: 16px;
    width: 40%;
    line-height: 1.5;   
}

.our-mission h3{
    text-transform: uppercase;
    text-decoration: underline;
    padding-left: 20px;
    padding-top: 3%;
    font-size: 26px;
}

.our-mission p{
    padding-top: 15px;
    padding-left: 20px;
    font-weight: normal;
    font-size: 16px;
    width: 40%;
    line-height: 1.5;
}   

.animation{
    position: absolute;
    right: 10%;
    top: 80%;
    height: 400px;
    width: 400px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
    <title>Blueprint</title>
</head>
<body>
    <div class="header">
        <img src="logo2.png" alt="">
        <ul class="header-menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Shop</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <div class="banner">
        <h2>The Blueprint</h2>
        <p> Harmonizing Vision and Technology</p>
    </div>

    <div class="services">
        <div class="main">
            <div class="html-css-js">
                <a href="#"><img src="html-css-js.png" alt="" height="200px"></a>
                <p>HTML CSS JS</p>
            </div>
            <div class="cs">
                <a href="#"><img src="CS.png" alt="" height="200px"></a>
                <p>Cybersecurity</p>
            </div>
            <div class="php">
                <a href="#"><img src="PHP.png" alt="" height="200px"></a>
                <p>PHP</p>
            </div>
        </div> 
    </div>

    <dotlottie-player class="animation" src="https://lottie.host/08850d9f-5c24-4ea0-a8ee-4a43317f41ba/vaTYGfDNtZ.json" 
    speed="1" 

    direction="1"

    playMode="normal" 

    loop 
    
    autoplay
    
    ></dotlottie-player>

        <div class="content">
            <div class="about-us">
                <h3 class="about-us">About Us</h3>
            <p class="about-us">The Blueprint is a premier web development company renowned for delivering innovative, scalable, and visually stunning digital solutions. Specializing in crafting bespoke websites and applications, The Blueprint helps businesses establish a powerful online presence and achieve their digital goals.</p>
            </div>

            <div class="our-mission">
                <h3>Our Mission</h3>
                <p>At The Blueprint, our mission is to empower businesses by creating innovative, scalable, and visually stunning digital solutions. We are dedicated to enhancing user experiences, driving growth, and fostering long-term digital success for our clients. By leveraging cutting-edge technologies and industry best practices, we deliver exceptional web and mobile applications that align with our clients' visions and objectives. Our commitment is to provide client-centered, forward-thinking solutions that make a meaningful impact in the digital landscape.</p>
            </div>
        </div>

   



    
</body>
</html>

Thiết kế website giá rẻ

Danh mục

I have published my test website using github only to realise that it is not responsive. how do i make my website responsive to other screen sizes?