My page shows a white space to the right, like padding. Applying some codes I’ve found on the web supposedly to fix this issue are not working. I’ve also found a post in a forum with someone with a similar issue and someone said to them it was his badly-closed divs, but couldn’t fix the issue by deleting mine…
I can add padding to the left so it compensates, but I doubt that’s the right way to fix it, right?
the and the blocks are the ones showing this extra space to the right
This is my WIP of the Tribute Page challenge.
Not sure what you mean by “to the right”, where exactly do you mean?
You have the default margin on the body, but other than that if it’s the space to the right of tribute-info that is just because it isn’t centered inside its parent container (in a left to right layout the element boxes are left-aligned by default).
BTW, your values for the repeat() function are invalid.
I’ve tried using justify-self, justify-items, and text-align with a value of center, couldn’t solve it unless I added left padding to #main and haven’t tried it with #tribute-info.
That is just natural space. I think it’s just because of how you are creating the columns.
Try using 1fr 1fr on main, then remove grid-template-columns from #tribute-info and just give it a little left/right padding. Edit: you can also give #tribute-info some max-width and auto margin to limit its maximum width on large screens and still have it centered.
BTW. I know the curriculum shows using vw for font-size, but without some constraints on how big and small the text is allowed to get it really doesn’t work. Check out the clamp() function, it’s a great new-ish addition to CSS and will help with responsive typography (fluid typography).
Alright, I’ll read about clamp then and replacing the 45vw’s and 48%'s with fr units perfectly solved this, thank you!. Also, I have two columns in there because I’ll put some extra images in the blank spaces and I thought it would be easier with a grid. Can I still do the same with a single column and padding?.
EDIT: Which units do you recommend to use inside clamp()?
The grid-template-areas is creating the two-column layout already. I’d suggest using the browser dev tools to see the grid. BTW, Firefox has a really great CSS grid inspector.
As for the images, it kind of depends on how you do it and where you put the images. Either as more grid children or inside the grid children you already have.
If you add them as grid children you will have to place them just like you are now with the other children. If you put them inside the children you likely just need a container for them and figure out how to do the layout (both flexbox and CSS grid would work).
I’d also suggest always adding all elements to the page before doing the layout, adding new elements at a later date may prove to have unexpected side effects, especially with CSS grid.
Usually, it would be rem and vw. rem for the min/max and vw for the “preferred” size. The MDN article has some good examples.
Thank you very much for your time. Finally finished with this one. Ended up leaving the grid-template-columns in #tribute-info because doing it made the left column wider than the right one for some reason.
Took me around 11-12hrs. Would you say is that normal for a page like this one and a beginner?
Out of those hours, around for 2 or 3, I struggled with the grid positioning until I found a forum that made me realize I had to make that grid inside the first one to adjust the positioning of my ul’s and images.
Even then, my page doesn’t work under 420px wide screens
Well, it’s a learning project, you should spend as much time as you need.
CSS Grid can get pretty complicated and your layout isn’t all that simple so I can understand why it might take extra time.
Sure, the more experience you get the faster you can build stuff. But what also tends to happen is you keep moving the goal post and creating more complicated projects, so in the end, the projects usually end up taking more time to build, not less.
Some feedback:
You have set a very small min value for the clamp() function which makes the page is pretty much unreadable at small screen sizes. I would not go lower than 1rem for the min value.
I imagine you have over complicated your media queries. You should only add the styles that change inside the media queries, not repeat style declarations that are not changing.
420px isn’t that bad but I’m pretty sure the overflow is because of your CSS Grid. I’m sure if you defaulted to a simple one-column layout (i.e. no grid) on small screen sizes your text would wrap like it is supposed to and not overflow.
You can test it by adding this selector at the bottom:
been out of the loop for days, finally I have time to resume, thank you for your time!