css-exercises VS hugo-blox-builder

Hi! I'm working on this css-exercise from the Odin Project: https://github.com/TheOdinProject/css-exercises/tree/main/flex/07-flex-layout-2 I've basically got the broad strokes in the layout put together. I'm also aware that I need to use flex-wrap to bring the flex items onto the next rows and also know how to finish this up. My question is about something weird I've noticed in the process. **Code Used** codepen.io/Ashwin-Parcha/pen/JjxxJJq **Problem** I've set a width on the cards (.card) that is too wide on purpose at 400px. These cards have default flex values of 0 1 auto. From my understanding, when the flex-basis is auto, the width is considered, but if the total width of the flex items is bigger than the parent, then the width isn't respected and the items will shrink to fit the container. But as you can see, the width **IS** being respected here for some reason. **Expected Outcome** The width shouldn't be respected and cards should shrink. Thanks for your help!

So, to make things clear, I am not asking anyone to help me with homework. I am learning through a free course and we don't receive grades. I am in this course to actually learn. I am almost finished but I am having a few problems. Here is a link to a codepen https://codepen.io/Brayancel/pen/rNZgdLR and here is the exercise I am following https://github.com/TheOdinProject/css-exercises/tree/main/flex/07-flex-layout-2 . The only thing I am not able to achieve is the stretch of the page. The checklist of the exercise says that the footer (the square that says Odin Project <3) is supposed to be pushed lower when the screen is squeezed. But mine does not do that. I really don't know what else to do here. I provided the code so everyone can see that I did.

How are you getting on with these exercises: https://github.com/TheOdinProject/css-exercises/tree/main/flex ?

Sure. Here is the ReadMe to the assignment details: https://github.com/TheOdinProject/css-exercises/tree/main/margin-and-padding/01-margin-and-padding-1. It is under the "Block and Inline" section of the CSS portion (foundations): https://www.theodinproject.com/lessons/foundations-block-and-inline. It's basically learning about the differences between block and inline and what elements are used.

In the desired result (https://github.com/TheOdinProject/css-exercises/tree/main/flex/05-flex-modal), the exclamation point circle has nothing above or below it. That implies it is part of a row of boxes.

I'm trying to do this, but getting absolutely nowhere fast, like literally just about 2 hours of head-scratching and getting frustrated.

Have seen similar reports in the past about Academic, such as https://discourse.gohugo.io/t/hugo-academic-adapting-old-hero-widget-css-custom-code/31611 and the related https://github.com/wowchemy/wowchemy-hugo-themes/discussions/2213 (and this particular oddity illustrates perfectly why growing numbers of Hugo afficionados think the “themes-first” approach of Hugo documentation is flawed) — but, of course, none of that helps you now. Does your project have a public repository for viewing, since the Academic documentation is (as you say) unhelpful?

If you're building a personal website from scratch in 2021 (especially a blog), I strongly recommend Hugo over Jekyll. I had used Jekyll for a decade and very often hit random quirks that have been completely eliminated with modern Hugo. However, there's a bit of a migration process if you are moving from Jekyll to Hugo despite both being Markdown-based blogs.

If you want a more advanced framework for a personal website, I recommend Wowchemy (https://wowchemy.com/) on top of Hugo, which gives the tools needed out-of-the-box like lazy loading/SEO/object-oriented collections, albeit with a massive learning curve.