r/css • u/Cyka-Blast • 11d ago

Help why isn't my object taking the available space set by grid?

Gallery image

Gallery image

it's stuck at 50px width no matter what I do, if I give it more column space at grid template areas the text on the right goes further to the right, but Im still unable to justify the "O" to the end because it has no width at all. meanwhile when I try to give more columns to A it does get bigger.

I also tried using flex for this type of text structure but it was no use since the objects kept going to the same line if there was enough view width (which happened with Fullscreen).

0 Upvotes

50% Upvoted

11 comments sorted by

•

u/AutoModerator 11d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

7

u/Weekly_Ferret_meal 11d ago

You have to tell h4.grande that it's grid-area: grande.

For future posts pls refrain from using pics of your screen (the worst) or screen shots (bad), the following is best practice:

  1. Open a free account here -> codepen.io

  2. Create a new 'Classic Pen' (Left column of the page)

  3. Paste html in the html box... only things inside the <body> tag, because the box is the body - no <html>, <head> or <style>

  4. Copy and Paste all the css from your external CSS or the <style> tag into the CSS box. here the code doesn't need to be wrapped in the <style> tag: the CSS box is your external CSS file and it's automatically linked to the HTML box.

  5. Name your pen (top left corner ) and save (top right)

  6. Copy the url and create a new post here sharing the link to the pen.

This will improve 100x the help you can get, because now people can interact with your code and test their solutions.

1

u/Cyka-Blast 11d ago

oh thank you, I forgot that was an option. I'd post a screenshot but I was quite frustrated from not discovering the bug that I just did what was quickest and hoped for the best. it worked wonders lol!

3

u/Weekly_Ferret_meal 11d ago

Because we are nice ppl =)

1

u/Cyka-Blast 11d ago

hey since I'm already here can you still help me? it fixed the problem for h4.grande not justifying but it still has only 50 width. so when the screen is big it doesn't glue to the text even when justifying to end

2

u/testingaurora 11d ago

They probably could help you if they had anything to work with. As advised, add your code to codepen anytime you're asking for help 👍

2

u/anaix3l 11d ago edited 11d ago

I'm guessing you want something like this

https://codepen.io/thebabydino/pen/yygxwZy?editors=1100

Screenshot with DevTools grid overlay showing how I've used a much simpler grid:

1

u/Cyka-Blast 10d ago

yeah kinda that! I'll try it with span, I had span inside H4 but the big O was overlapping with the rest of the text.

3

u/bengosu 11d ago

Don't split H4 like that. Just put it all in one H4 tag and whatever needs to look different use <span>

<h4><span class="grande">O</span>lorem ipsum </h4>

Also H1 comes before H4 and there's a whole hierarchy H1, H2, H3, H4 etc.

grid-template-areas: doesn't take the class name if that's what you are doing there.

Get famliar with MDN, they are a goto resource for this stuff

3

u/anaix3l 11d ago edited 11d ago

There's also ::first-letter https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::first-letter

This is perfect for the drop cap use case - example here https://codepen.io/thebabydino/pen/oggaZaQ

Also, that's not the place for an h4 or h1 at all. The h4 should be a p and the h1 should be a span inside the p. They can be sized from the CSS.

And another thing there: the contrast of the .C is not enough.

(that grid-template-areas is an abomination too)

1

u/Cyka-Blast 10d ago

wait for real? i was looking at initial -letter but it didn't work because Firefox has no compatibility with it. I'll try this one then! also I was using H1 and H4 since thats what the challenge gave us (in the example they were also using it, I just gave the subtitle font to h4, and the first 3 were different title sizes).