What am I doing wrong? Why my grid area isn't working?

HTML CODE:



Hi, I am Harsh John


self taught front-end dev


picture of Harsh John smiling

CSS CODE:
.intro {
position: relative;
}

.intro__img {
box-shadow: var(–bs-primary);
}

.section__title–intro {
font-weight: var(–fw-reg);
}

strong {
font-weight: var(–fw-bold);
}

.section__title–intro strong {
display: block;
}

.section__subtitle–intro,
.section__subtitle–about {
background: var(–bg-clr-accent);
font-family: var(–ff-secondary);
margin-bottom: 1em;
}

@media (min-width: 650px) {
.intro {
display: grid;
width: min-content;
margin: 0 auto;
grid-column-gap: 1em;
grid-template-areas:
‘img title’
‘img subtitle’;
grid-template-columns: min-content max-content;
}

.intro__img {
    grid-area: img;
    min-width: 250px;
}

}

Hello @HarshJohn,

Do you have a link to your project? To check the entire code. Could you give us more details about what is not working exactly?

Sorry @HarshJohn, but it is really difficult to read the code that way. You can use CodePen for example to create an accessible link.

Here’s the link to the code: https://codepen.io/harshj_ohn/pen/PoOaaoj?editors=1000

Here’s a link the to website I am trying to make: Adobe XD

with some additional changes of my own

Thank you, and what are you trying to do exactly? According to what you said, you have an issue with the grid. What happens? :slight_smile:

Thank you @LucLH for taking some time to review my issue, brother.
My problem with grid as you can also see in my code is that, it’s not working.
I set the display as a grid to my intro section.
I used grid template area and assigned grid areas to img, title and subtitle.
But they are not following the command.
I attached a link to the website in the above message, here it is again: Adobe XD

I am trying to make my intro section look like this when width is more than 650px as you can see in the media querry.

You’re welcome @HarshJohn, I found out why it doesn’t work. Let’s watch your code.

Your code:

<!-- welcome-section is not an existing tag, this is your first issue. You can use section or div for example. -->
<welcome-section class="intro" id="welcome-section">
  <section class="my-intro">
    <h1 class="section__title section__title--intro">
      Hi, I am <strong>Harsh John</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">self taught front-end dev</p>
    <img class="intro__img" src="https://pbs.twimg.com/profile_images/1483466494243909632/OKLxtHKC_400x400.jpg" alt="picture of Harsh John smiling">
  </section>
</welcome-section> <!-- don't forget to change that -->

I put you two comments, about your tag syntax. To explain you what happens is that you apply the grid for the <welcome-section> with the class intro (it should be a validate tag, I will explain in imagining it is true). But inside it, you have a block tag section. So when you apply the grid here, it consider there is only one element between <welcome-section> and <welcome-section>. So it cannot apply your grid template. If you want it works, you have to apply the grid for the section into <welcome-section> (with the id my-intro). Do you understand the issue? :slight_smile: