Skip to content
OverviewSolutions
5
Comments
17

hamza

@Hamzaouladev390 points

studying all these man-made horrors so they are no longer beyond my comprehension.

I’m currently learning...

JS, CSS, React, MongoDB, Firebase, node js, etc.

Latest solutions

Latest comments

  • hamza•390
    @Hamzaouladev

    hello @Hola-Code001, here's some feedback regarding your layout i hope you find interesting:

    • it's usually a bad idea to give your component a fixed height, your component should dynamically handle any large amount of content in any screen width without running into overflowing issues, its best to leave the height to a default auto.
    • a cool, simple way to handle spacing without worrying about unpredicted flexbox behavior is called The lobotomized owl selector, i invite you to check it out!

    i hope you found my feedback helpful, keep hacking!

    Marked as helpful
  • hamza•390
    @Hamzaouladev

    hello @JGdmd, here's some layout tips that i think you may find interesting:

    • by adding the following code to your component you'll achieve responsiveness without needing to use media queries:
    .card {
   width: 90%;
   max-width: 500px;
    • also it's not a good idea to give your component a fixed height, you should let the content of your component determine its height or you'll run into overflowing issues
    • it's a good hack is use the following code when you're starting a project to ensure your images wont behaave in a wy that will breaaak your layout:
    img,
picture {
  max-width: 100%;
  display: block;
}

    hope you found my feedback interesting, keep hacking!

    Marked as helpful
  • hamza•390
    @Hamzaouladev

    hello @victoriamnx, great job finishing this project, i have some feedback i hope you find interesting:

    • it's better to let the container determine the width of your component, not the content, and vise versa when it comes to height.. so i suggest you remove the width from your image element and add it to your container element, the way i suggest you do it is to give it a relative width and a fixed max-width for responsiveness just like this:
    .box {
   width: 90%;
   max-width: 22.5rem;
}
    • also a good hack when starting projects is to add the following code to your images tags to prevent unwanted behavior:
    img,
picture {
  max-width: 100%;
  display: block;
}

    i hope you found my feedback helpful, keep going!

    Marked as helpful
  • hamza•390
    @Hamzaouladev

    hello @maiconrmonteiro, here's some feedback regarding your layout i hope you find interesting:

    -in order to keep your code DRY, i suggest you dont rewrite max-width in your media query, instead just use the following code:

    section {
width: 90%;
max-width: 540px;
}

    also i suggest you add this code for more responsive images:

    picture, 
img {
   display: block;
   max-width: 100%;
}

    -you should also wrap your component in a <main> tag and use more semantics html5 tags in general.

    hope you found my feedback helpful, happy hacking!

    Marked as helpful
  • hamza•390
    @Hamzaouladev

    hello @comebackist, heres some feedback on the layout that you may fin interesting..

    you dont have to repeat max-width in multiple places, you can give your component a relative width and a fixed max-width without repeating the code in a media query:

    .card {
   width: 90%;
   max-width: 41.2rem;
}

    -when you gave the body a display of flex and flex-direction: center;, you flipped the flex axis so the code which does the vertical centering is justify-content: center; so you should remove the align-content property because it will break your layout in this case, because the height is relative, use margin: 0 auto; instead.

    -my suggesting for the buttons is to give their parent a flex-wrap: wrap; and a gap: 1rem; so the children can have more room and maintain their dimensions in small screens

    i hope you found my feedback helpful, keep hacking!

    Marked as helpful
  • hamza•390
    @Hamzaouladev

    hello @sianidan, great job finishing this project!

    i have some suggestions that you may find interesting:

    the styling of your component looks great, however it may break if the content inside were to change, the reason is that fixed heights make the components prone to overflowing issues.

    my suggestion is to remove the height from the container, and to manage spacing you can add the gap property to your flex parent: .card { gap: 2rem; }

    i hope you find my suggestions helpful, Happy Hacking

    Marked as helpful
View more comments