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?