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

HTML-CSS
#1

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;
}

}

#2

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?

#4

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

#5

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

#6

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

with some additional changes of my own

#7

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:

#8

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.

#9

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: