Can some one tell me why this css code is not working properly?-CodePudding

Here is the JSfiddle complete code link:

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

body {
  background: #0b172a;
  font-family: sans-serif;
}

#container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
  color: white;
  text-transform: uppercase;
}

.clock-ctr {
  position: relative;
  border: 2px solid white;
  height: 80vh;
  width: 80vw;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hour-ctr {
  grid-area: hour;
}

.min-ctr {
  grid-area: min;
}

.sec-ctr {
  grid-area: sec;
}

.ampm {
  grid-area: ampm;
  background: #bc4123;
}

.time-ctr {
  position: absolute;
  height: 70%;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  grid-template-areas: "hour min sec" "ampm ampm ampm";
}

h1 {
  margin-bottom: 1rem;
  letter-spacing: 8px;
  font-size: 2.5rem;
}

.time-box {
  background: #bc4123;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  align-items: center;
  height: auto;
  text-align: center;
  font-weight: bold;
  font-size: 28px;
}

<div id="container">
  <h1 >Clock</h1>
  <div >
    <div >
      <div >
        <p >00</p>
        <p >Hour</p>
      </div>
      <div >
        <p >00</p>
        <p >Minute</p>
      </div>
      <div >
        <p >00</p>
        <p >Second</p>
      </div>
      <p >AM</p>
    </div>
  </div>
</div>

Can any one tell me how to improve this code

I tried to make is completely responsive but it is not not working, I tired to use flex to make the element appear in center of page. Then I use grid to create the clock layout and i didn't knew how to align the cells so I used grid again in them. I was using rem and em to make responsive code but it didn't work out well. please review my code.

CodePudding user response：

This is because of the font-size of the time-box div that is not responsive (28px whatever the device size), To make it responsive I added media queries to change the font depending on the device width, As presented in this example:

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

body {
  background: #0b172a;
  font-family: sans-serif;
}

#container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
  color: white;
  text-transform: uppercase;
}

.clock-ctr {
  position: relative;
  border: 2px solid white;
  height: 80vh;
  width: 80vw;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hour-ctr {
  grid-area: hour;
}

.min-ctr {
  grid-area: min;
}

.sec-ctr {
  grid-area: sec;
}

.ampm {
  grid-area: ampm;
  background: #bc4123;
}

.time-ctr {
  position: absolute;
  height: 70%;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  grid-template-areas: "hour min sec" "ampm ampm ampm";
}

h1 {
  margin-bottom: 1rem;
  letter-spacing: 8px;
  font-size: 2.5rem;
}

.time-box {
  background: #bc4123;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  align-items: center;
  height: auto;
  text-align: center;
  font-weight: bold;
}

@media (min-width:768px) {
  .time-box {
    font-size: 18px;
  }
}
@media (min-width:1024px) {
    .time-box {
      font-size: 22px;
     }
}
@media (min-width:1280px) {
  .time-box {
      font-size: 28px;
    }
}

<div id="container">
  <h1 >Clock</h1>
  <div >
    <div >
      <div >
        <p >00</p>
        <p >Hour</p>
      </div>
      <div >
        <p >00</p>
        <p >Minute</p>
      </div>
      <div >
        <p >00</p>
        <p >Second</p>
      </div>
      <p >AM</p>
    </div>
  </div>
</div>

You can as well use calc() function, so you can calculate your font size relative to the screen width like this:

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

body {
  background: #0b172a;
  font-family: sans-serif;
}

#container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5rem;
  color: white;
  text-transform: uppercase;
}

.clock-ctr {
  position: relative;
  border: 2px solid white;
  height: 80vh;
  width: 80vw;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hour-ctr {
  grid-area: hour;
}

.min-ctr {
  grid-area: min;
}

.sec-ctr {
  grid-area: sec;
}

.ampm {
  grid-area: ampm;
  background: #bc4123;
}

.time-ctr {
  position: absolute;
  height: 70%;
  width: 90%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 10px;
  grid-template-areas: "hour min sec" "ampm ampm ampm";
}

h1 {
  margin-bottom: 1rem;
  letter-spacing: 8px;
  font-size: 2.5rem;
}

.time-box {
  background: #bc4123;
  border-radius: 10px;
  display: grid;
  justify-items: center;
  align-items: center;
  height: auto;
  text-align: center;
  font-weight: bold;
  font-size: calc(18px   0.390625vw);
}

<div id="container">
  <h1 >Clock</h1>
  <div >
    <div >
      <div >
        <p >00</p>
        <p >Hour</p>
      </div>
      <div >
        <p >00</p>
        <p >Minute</p>
      </div>
      <div >
        <p >00</p>
        <p >Second</p>
      </div>
      <p >AM</p>
    </div>
  </div>
</div>

CodePudding user response：

the issue with the CSS code in the Stack Overflow question is that the left and right values for the #nav element are set to 0. This causes the element to take up the full width of its parent element, which is likely not the intended behavior.

To fix this issue, you can try setting the left and right values to auto like this:

#nav {
  position: fixed;
  top: 0;
  left: auto;
  right: auto;
  width: 100%;
  height: 60px;
  background-color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

With this change, the #nav element will no longer take up the full width of its parent element and will instead be positioned at the top of the page with its width set to 100%.