Could someone help me make my website Responsive? (HTML and CSS)-CodePudding

Hello can someone help me make this website responsive for any device or give me a tip on how I could do it. I have already tried to work with flex-shrink, but it did not work. To be honest, the button animation is not from me -> CodePen preset. Probably one of the reasons why I can't make the "buttons customizable". (sry for my bad english ;) )

<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>KSSB</title>

    <link rel="stylesheet" href="css.scss">
</head>

<body>
    <h1 id="title">KSSB</h1>
    <div id="content">


        <div class="item container"><img class="img"
                src="https://d1ras9cbx5uamo.cloudfront.net/eyJidWNrZXQiOiAiY29tLm51bWVyYWRlIiwgImtleSI6ICJpbnN0cnVjdG9ycy80Y2ViNmRiYzc5NDc0YjRmYWIyNTcwZjZiNTM2MjM0Mi5qcGVnIiwgImVkaXRzIjogeyJyZXNpemUiOiB7IndpZHRoIjogMjU2LCAiaGVpZ2h0IjogMjU2fX19"
                style="width:160px;height:auto;"></div>

        <div class="item container"><img class="img"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Flag_of_Germany_(3-2_aspect_ratio).svg/220px-Flag_of_Germany_(3-2_aspect_ratio).svg.png"
                style="width:160px;height:auto;"></div>

        <div class="item container"><img class="img"
                src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Flag_of_the_United_Kingdom_(3-5).svg/1200px-Flag_of_the_United_Kingdom_(3-5).svg.png"
                style="width:160px;height:auto;"></div>
    </div>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Shippori Antique&display=swap');


        body {
            background-color: black;
            font-family: 'Shippori Antique', sans-serif;
        }

        #content {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50vh;
        }

        .item {
            margin: 0 40px;
        }
        #title {
            text-align: center;
            color: #FFFFFF;
            text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #ff0000, 0 0 30px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000, 0 0 75px;
            font-size: 8vh;
        }

        .item {
            position: relative;
        }

        .item::before,
        .item::after {
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: -1;
            border: 2px solid rgb(255, 0, 0);
            transition: all 0.25s ease-out;
        }

        .item::before {
            background-color: rgb(255, 0, 0);
            top: -15px;
            left: -15px;
        }

        .item::after {
            bottom: -15px;
            right: -15px;
        }

        .item:hover::before {
            top: 15px;
            left: 15px;
        }

        .item:hover::after {
            bottom: 15px;
            right: 15px;
        }
    </style>
</body>

</html>

CodePudding user response：

    @media only screen and (max-width: xxem) {
    write your css queries here.
}

try css media query, there are different breakpoints for different devices. I think it's 320px — 480px for mobile devices and 481px — 768px for tablets.