Struggling with CSS [frontendmentor challenge]

I tried google first but I don't know how to fix this.

18 Replies

Jochem•12mo ago

without your code, it's impossible to say. There's some tips on sharing it in #how-to-ask-good-questions, live versions are much more useful than pasted code in discord messages

riddleOP•12mo ago

Yeah my bad, I forgot to include the code is pastebin okay

Jochem•12mo ago

like I said, live code is more useful so something like codepen or codesandbox

riddleOP•12mo ago

okay

Jochem•12mo ago

I'd say just pasted code blocks over pastebin though, saves people clicking through unless it's a lot of code, but the more code, the more important it is to have the live code running to see what's going on

riddleOP•12mo ago

html{
    font-family: 'Figtree';
    background: var(--bg);
}

h1,h2,h3{
    color: var(--mainText);
}

h1,h2,h3,p{
    margin-left: 25px;
}

h1{
    font-weight: 800;
}

h3{
    font-weight: 600;
}

p{
    color: var(--para);
    font-weight: 600;
}

.card{
    display: flex;
    flex-direction: column;
    background-color: var(--cardBg);
    box-shadow: 8px 8px 0px 0px #000;
    border: 2px solid black;
    border-radius: 5%;
    width: 500px;
    height: 70vh;
    margin-top: 80px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 10px;
    text-align: left;
}

.card .illu-image{
    border-radius: 1.3rem;
    width: 450px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-top: 20px;
}

.avatar{
    margin-left: 25px;
}

.grid{
    display: flex;
}

.box{
    background: var(--bg);
    margin-top: 15px;
    width: fit-content;
    border-radius: 0.7rem;
}

html{
    font-family: 'Figtree';
    background: var(--bg);
}

h1,h2,h3{
    color: var(--mainText);
}

h1,h2,h3,p{
    margin-left: 25px;
}

h1{
    font-weight: 800;
}

h3{
    font-weight: 600;
}

p{
    color: var(--para);
    font-weight: 600;
}

.card{
    display: flex;
    flex-direction: column;
    background-color: var(--cardBg);
    box-shadow: 8px 8px 0px 0px #000;
    border: 2px solid black;
    border-radius: 5%;
    width: 500px;
    height: 70vh;
    margin-top: 80px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    padding: 10px;
    text-align: left;
}

.card .illu-image{
    border-radius: 1.3rem;
    width: 450px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-top: 20px;
}

.avatar{
    margin-left: 25px;
}

.grid{
    display: flex;
}

.box{
    background: var(--bg);
    margin-top: 15px;
    width: fit-content;
    border-radius: 0.7rem;
}

Jochem•12mo ago

and the html?

riddleOP•12mo ago

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Frontend Mentor | Blog preview card</title>
    <link rel="stylesheet" href="style.css" />
    <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=Figtree:wght@600;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="card">
      <img class="illu-image" src="assets/images/illustration-article.svg" alt="" />
      <div class="box">
        <h2>Learning</h>
      </div>
      <h3>Published 21 Dec 2023</h3>
      <h1>HTML & CSS foundations</h1>
      <p>
        These languages are the backbone of every website, defining structure,
        content, and presentation.
      </p>
      <div class="grid">
        <img class="avatar" src="assets/images/image-avatar.webp" alt="" />
        <h3>Greg Hooper</h3>
      </div>
    </div>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./assets/images/favicon-32x32.png"
    />
    <title>Frontend Mentor | Blog preview card</title>
    <link rel="stylesheet" href="style.css" />
    <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=Figtree:wght@600;800&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="card">
      <img class="illu-image" src="assets/images/illustration-article.svg" alt="" />
      <div class="box">
        <h2>Learning</h>
      </div>
      <h3>Published 21 Dec 2023</h3>
      <h1>HTML & CSS foundations</h1>
      <p>
        These languages are the backbone of every website, defining structure,
        content, and presentation.
      </p>
      <div class="grid">
        <img class="avatar" src="assets/images/image-avatar.webp" alt="" />
        <h3>Greg Hooper</h3>
      </div>
    </div>
    </div>
  </body>
</html>

Jochem•12mo ago

you mean the lack of space at the end of the button, right? You have a 25px left margin set on h2's, but there's no right margin, so .box just wraps tight around it

riddleOP•12mo ago

I put left margin only to give space from the sides. Without it, it looks like the 2nd img

Jochem•12mo ago

the quick and dirty way would be to put a right padding on that h2 as well, but the better way would probably be to put the 25px on the padding for .card

riddleOP•12mo ago

Oh the padding on the card fixed it. how do I fix the height?

Jochem•12mo ago

"fix"?

riddleOP•12mo ago

uh reduce then?

riddleOP•12mo ago

it should look like this

Jochem•12mo ago

h2 has a default margin of 0.83em, so set a lower padding if you want that to be smaller you can use the inspector in devtools to see why certain elements are certain sizes, including the built-in browser rules

riddleOP•12mo ago

Okay I'll try those out thanks for the help

Jochem•12mo ago

no problem 🙂

Gaming

Programming

Struggling with CSS [frontendmentor challenge]