Problem positioning content with subgrid
Guys, I'm having a problem positioning the content of my first line. As you can see, I positioned the content of my cards with subgrid, basically I have a layout of 6 columns repeat(2, 2.5rem 1fr 2.5rem).
The content is positioned correctly on mobile, but when I switched to the desktop I don't know why I can't get the content in the first line to extend from column line 2 to -2. I think it's a specificity problem, some statement I made on mobile that I'm not overriding when I move to desktop. Could anyone look at my code and help me find where this problem is?
Live site: https://sircarloschaves.github.io/single-price-grid-component/
Repo: https://github.com/sircarloschaves/single-price-grid-component
Single Price Grid Component
A website that I cloned from a challenge from the Front End mentor website. It is a study and practice site.
GitHub
GitHub - sircarloschaves/single-price-grid-component
Contribute to sircarloschaves/single-price-grid-component development by creating an account on GitHub.
9 Replies
Card content is positioned using subgrid
can you help me @vince , king of css?
The content should look like this
please don't @ people who aren't helping you in this current post
just cause they helped previously, doesn't mean you can just @ them because you want them to help again
You're too kind!
I've never used subgrid so not sure how much I can help you out, but it looks like you may have already fixed it?
Or did you mean
30-day, hassle-free money back guarantee?I'm looking at it now, I don't know why it isn't spanning. The element itself is spanning the whole width, just not the text.
Don't you think subgrid is a bit overkill for this though? 😉
hey, I did it this way because there is a video of Kevin using this technique to layout with subgrid
theoretically the texts were supposed to be occupying all the space, if you use a background color on the elements you see that they are occupying the space in an invisible way, but the text does not
Anyway, I'm going to redo the layout in the simplest way, two columns and use padding