How does using min-width along with width work but not min-width alone

Question

I have a problem with the min-width in css for an anchor tag,

when min-width is used in combination with col-4 class it works as expected (pls explain this)
when min-width is removed the button gets aligned to left and goes back to default width
when col-4 is removed nothing works
when properties of col-4 are put into a separate class, again it doesn't work.


<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>Dashboard</title>
</head>

<body>
    <link rel="stylesheet" type="text/css" href="{% static 'mainpage/index.css' %}">
    <nav class="header">
        <h1>DASHBOARD</h1>
    </nav>
    <div class="row">

        <div class="col-4">
            TASKS:

            List of tasks here
        </div>
        <div class="col-4 link">
            PERIOD: <br><br>
            <a class="col-4 periodbtn" href="google.com" rel="noopener noreferrer" target="_blank">GC</a>
        </div>
        <div class="col-4" id="clock">
        </div>
    </div>
    <script>
        let clock = () => {
            let date = new Date();
            let hrs = date.getHours();
            let mins = date.getMinutes();
            let secs = date.getSeconds();
            let period = "AM";
            if (hrs == 0) {
                hrs = 12;
            } else if (hrs >= 12) {
                hrs = hrs - 12;
                period = "PM";
            }
            hrs = hrs < 10 ? "0" + hrs : hrs;
            mins = mins < 10 ? "0" + mins : mins;
            secs = secs < 10 ? "0" + secs : secs;
            let
                time = `TIME \n${hrs}:${mins}:${secs}:${period}`;
            document.getElementById("clock").innerText = time;
            setTimeout(clock,
                1000);
        };
        clock();
    </script>
    <style>
* {
     box-sizing: border-box;
     padding: 0%;
}
 .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%;
}
 [class*="col-"] {
     float: left;
     padding: 15px;
     border: 1px solid #000;
     text-align: center;
}
 .header {
     background-color: #29b4e2;
     text-align: center;
     color: black;
}
 #clock {
     font-size: 100%;
}
 a {
     color: black;
     padding: 15px;
     text-decoration: none;
     background-color: aquamarine;
     border-radius: 10px;
     min-width: 100%;
}
 body {
     background-color: #000;
     color: white;
     font-family: system-ui, 'Courier New', Courier, monospace;
     margin: 0%;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .row {
     display: flex;
     height: 100%;
     align-items: center;
}

</style>
</body>

</html>

because `a` is an inline element so min-wdith or width will not work unless you make it block element (what col-4 is doing) (more precisely it make it float so blockified — Temani Afif, Jun 30 '21 at 12:01

How does using min-width along with width work but not min-width alone

0 Answers0