Skip to content
OverviewSolutions
27
Comments
3
David Smith
@VimDiesel123

All comments

  • Shalmali-Patil•60
    @Shalmali-PatilSubmitted 9 months ago

    I wasn't able to successfully reduce the height of the image. I tried defining height and max-height properties in the CSS but it didn't work. Let me know if there are any suggestions for this issue.

    Responsive recipe page using Flexbox

    1
    David Smith•390
    @VimDiesel123Posted 9 months ago

    Your solution looks great! Nice work.

    As for your question about the height: I dug into it a bit and it's a little complicated but I think it's interesting:

    First, when you set a % value for height, the value is based off the height of the "containing block" (in this case, .container). The tricky thing is, by default, the height of an element is based off the height of its content, but changing the height of a child element would change the height of the containing block's content!. So the browser can't know what 60% will actually be!

    The spec explains what will happen when you set give an element a % height like this:

    "If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'."

    In other words, setting a % height on the child of an element without an explicit height does nothing.

    The only way it could know what the % will actually resolve to is if the containing block has an explicit height. For example if you had:

    .container {
  height: 1000px;
}

    But setting explicit heights is likely to cause overflow issues, so you probably shouldn't do that.

    Here is a good stack overflow post I read when looking into this.

    You can set an explicit max-height on your image, like:

    .img {
  max-height: 120px;
}

    Or because your image is inside a flex container with flex-shrink: 1 and flex-basis: 0%, it will shrink as the size of the container gets too small to fit all of its content.

    Hope this was interesting. Is was for me!

    Good luck!

    Marked as helpful
    0
  • David Smith•390
    @VimDiesel123Posted 9 months ago

    Hi Jackie, I like your solution!

    For centering the component within a container I think that the way you did it with the .center class is a good approach:

    .center{
    display:flex;
    align-items: center;
    justify-content: center;
}

    And for centering things vertically in the viewport I think just adding padding is a good way to do it!

    As long as the container's height is larger than the height of the component, align-items: center will center it vertically.

    margin would also work, but in this case padding is better in my opinion.

    One suggestion I would have would be to use classes instead of ids as selectors when styling different sections. In a smaller project like this it's fine, but styling with ids should be a last resort because they have a high specificity and it could make figuring out why a certain style is or isn't getting applied more complicated and confusing if you have a big mix of .class styles and #id styles.

    Hope that was helpful!

    Marked as helpful
    0
  • iOtele•20
    @iOteleSubmitted 9 months ago

    -How to align the card to the center -How to efficiently use CSS -Can I start applying for jobs when I can conveniently use tools like chatGPT to solve tasks? I kindly welcome any suggestions and oberservation. Thank you.

    Social-profile with flexbox

    1
    David Smith•390
    @VimDiesel123Posted 9 months ago

    Hi iOtele. Nice Solution!

    To try and answer your questions in order:

    • "How to align the card to the center?": The way you chose to implement this was fine! For these challenges, to center the component I'm building, I normally just use the main element which I give a display: grid and make take up the entire height of the viewport like this:
    main {
  min-height: 100svh;
  display: grid;
}

    Doing it this way you'd only need to set a min-height, because main is a block level element by default and therefore already takes up the entire width.

    Then on the component I would use place-self: to center it like this:

    .component {
  place-self: center center;
}

    If it was a real site with more content you might not want to do this, but for these little challenges it works well.

    • "How to efficiently use CSS?": I don't have a simple answer to this one because I'm still learning, but I can tell you what I'm doing! I think it's best to nail down the fundamental concepts behind CSS like the box-model, the cascade, specificity, layout algorithms etc. That will hopefully give the best foundation to build on as you learn more.

    • "Can I start applying for jobs when I can conveniently use tools like chatGPT to solve tasks?": Yes. You should have a solid understanding of the concepts so you can solve more complicated problems than ChatGPT can, but everybody uses ChatGPT or has to look things up some times, especially with CSS.

    A final tip:

    • I would use just <a> tags for the links. You can style an anchor tag however you need to, to make it look like the buttons in the design. Semantically, buttons are more for interaction within a site and anchors are for taking you to another one, which is what is happening here.

    Hope some of this was useful!

    Please correct me if anything I said was wrong.

    Good luck!

    Marked as helpful
    1