Question 410121 in Html Question posted in
Some basic documentation can be found here.

why is border for text not working html css

I’m very new to html and css, trying to learn by creating my first web project which is to-do list. i have a draft of how i want it to look like and since i don’t know how to work with dates on my website yet, i’m just trying to make a paragraph with a random date shown. i want it to look like this:

Desired look

and i made it look like this.

The problem is, when I change the size of the page even a bit I get this:

Actual look

* {
    font-family: "Instrument Serif", serif;
    font-weight: 400;
}

h1 {
    font-size: 50px;
    margin: 10rem 0 1rem 0;
    text-align: center;
    font-weight: 550;
}

.date {
    text-align: center;
    border: 0.5px solid #888579;
    background-color: #ececec;
    color: #888579;
    margin: 0 900px 20px 900px;
    border-radius: 7px;
    padding: 3px;
}

.top-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-input {
    box-shadow: 0 8px 6px -6px #3a3937;
    font-style: italic;
    font-size: 18px;
    padding: 9px 100px;
    border-radius: 7px;
    border: 0;
    text-align: center;
    margin-right: 20px;
    margin-left: 20px;
}

button {
    box-shadow: 0 8px 6px -6px #3a3937;
    font-weight: bolder;
    border: none;
    padding: 9.5px 17px 9px 17px;
    margin: 0 20px 0 10px;
    background-color: #888579;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 20px;
}

.box {
    border: 0.2px solid #888579;
    border-radius: 20px;
    padding: 2rem 2rem 2rem 2rem;
    margin: 10px auto 20px;
    width: fit-content;
    height: fit-content;
    background-color: #ebeae8;
}

ul li {
    list-style: none;
    user-select: none;
    font-size: 25px;
    cursor: pointer;
    padding: 10px;
}

footer {
    text-align: center;
    font-weight: 550;
    color: #000000;
    font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>to-do list</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <h1>to-do list</h1>
    <p class="date">05/10/24</p>
    <div class="box">
        <div class="top-container">
            <input type="text" class="add-input" placeholder="my new task is..."></input><br />
            <button>+</button>
        </div>
        <ul class="list-container">
            <li>task 1</li>
            <li>task 2</li>
            <li>task 3</li>
        </ul>
    </div>
    

    <footer>@1wakos</footer>

  </body>
</html>

can someone please help? i can’t see any mistakes

Tags:

2

Answers


  1. 0

    for the margins, try use %s instead of hard values in px, this might do what you want it to. You can also use vh (vh stands for viewpoint height, equal to 1% of height of the viewport. Relative to viewport height)

    you can also try the rem unit (which is relative to the font size, and might be more useful here)

    try something like this:
    margin: 50% 50%

    Login or Signup to reply.
  2. 0

    The problem is "margin: 0 900px 20px 900px;" which uses absolute values you can use instead flex which will use relative values see snippet:

    .date-container{
    display: flex;
    justify-content: center;
    align-items: center;

}

.date {
    text-align: center;
    border: 0.5px solid #888579;
    background-color: #ececec;
    color: #888579;
    
    border-radius: 7px;
    padding: 3px;
}
    <div class="date-container">
    <p class="date">05/10/24</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search