(grid--1x2) feature:nth-of-type(even) .feature__content not working

HTML/CSS
1

Hi!
I am trying to swap the image and the content as explained almost at the end of the third course of HTML. Everything in the code is written the same. However, I cannot swap the order.
I have read the code many times and I am not sure why this is happening.
I have followed other tutorials regarding the same concept and everything from the logical point of view seems to be the same… :woman_shrugging:

HTML Code for this section: – I removed the first angular bracket to show the content here. Otherwise, it will hide the content. I still do not have permission to post images…

section class=“block container”>
article class=“grid grid–1x2 feature”>
div class=“feature__content>
span class=“icon-container”>
svg class=“icon icon–primary”>
use xlink:href=“images/sprite.svg#computer”>
/svg>
/span>
h3 class=“feature__heading”>Simple fast websites
p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Atque, id.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi,
optio ut molestias odit at hic?
/p>
a href=”#" class=“link-arrow”>Learn More
/div>
picture>
source
type=“image/webp”
srcset=“images/fast.webp 1x, images/fast@2x.webp 2x”
/>
source
type=“image/jpg”
srcset=“images/fast.jpg 1x, images/fast@2x.jpg 2x”
/>
img
class=“feature__image”
src=“images/fast@2x.jpg”
alt=“Line charts”
/>
/picture>
/article>
/section>

CSS Code:
/Grids/

.grid {
display: grid;
}

@media screen and (min-width: 768px) {
.grid–1x2 {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (min-width: 1024px) {
.grid–1x3 {
grid-template-columns: repeat(3, 1fr);
}
}

/Blocks/

.block {
–padding-vertical: 6rem;
padding: var(–padding-vertical) 2rem;
}

.block__header {
text-align: center;
}

.block__heading {
margin-top: 0;
}

.block–dark {
background: #000;
color: var(–color-body-darker);
}

.block–dark .block__heading {
color: #fff;
}

.block–skewed-right {
padding-bottom: calc(var(–padding-vertical) + 4rem);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 83%);
}

.block–skewed-left {
padding-bottom: calc(var(–padding-vertical) + 4rem);
clip-path: polygon(0% 0%, 100% 0, 100% 80%, 0 100%);
}

.container {
max-width: 1140px;
margin: 0 auto;
}

/Features/

.feature {
gap: 4rem 2rem;
margin: 4rem 0;
}

.feature__heading {
margin: 1rem 0;
}

.feature > img {
width: 100%;
}

.feature__image {
width: 100%;
}

@media screen and (min-width: 768px) {
.feature:nth-of-type(even) .feature__content {
order: 2;
}
}

2

I have exactly the same issue that you’re experiencing. On inspection in Google Dev Tools, the browser does not even recognize the media query… It’s as though there is an issue with the selector not knowing .feature:nth-of-type(even) .feature__content exists in the markup.

*Edit

In attempting to solve separate issue where I noticed my top margins were considerably larger than in the video, I solved the problem we were both experiencing. The issue is in the Markup! When he pauses the video to make several copies of the grid items, I thought he meant to copy everything INCLUDING the section element. If you have 3 section elements (one for each grid layout) the nth-of-type(even) Will not work, because it does not appear to be counting instances of the div that are in separate sections. As soon as I delete the other sections and wrapped all 3 articles in ONE , the @media query functioned as demonstrated.

4 Likes
3

@NathanielKhallil you’re a life saver! this has been annoying me for the last 3 hours! Your suggestion worked perfectly! Thanks