Fylo dark theme landing page

Community feedback

• 

  Levis Kim•1,230

  @Orekihotarou-k

  Posted over 1 year ago

  Hi there @falloumacbook. Congrats on completing another challenge! 🥳. I took a look at your live solution and there's a few things I think might be of help.

  1. I noticed that you use fixed px values for your widths and heights on the images. I think that using percentage values is easier and also facilitates making them responsive. Here's an example;

  • Create a div for the image in the illustration div and then give the new div (let's call it illustration-image) a width of maybe 80% (this width will always be 80% of the parent container illustration on any screen size).

  .illustration-image { width: 80% }

  • In your style-sheet, select the image inside the illustration-image div and set the width of the image to 100% (this will make the image 100% of it's parent container);

  .illustration-image > img { width: 100% }

  • With this done, you can then change the width of the parent (illustration-image). When you change this value, the size of the image will also be changed as the image is 100% of its parent.

  .illustration-image { width : /* add desired value as a percentage */ }

  2. Using your cards section as an example, I noticed that as the screen gets smaller, the card content just starts to overflow. This is because of the fixed width and height values assigned to them. To fix this, instead of setting fixed values in px, padding can be used to adjust these to your desired sizes. For instance;

  .card { color: white; width: 350px; height: 170px; background: hsl(219, 30%, 18%); margin-bottom: 40px; } these are the styles you applied. Using padding, it'll look something like this;

  .card { color: white; padding: 2rem ; *this sets the padding for top, bottom, left, and right to 2rem* background: hsl(219, 30%, 18%); margin-bottom: 40px; }

  3. Another thing I think may be useful for layouts like this is using grid. Here's a link to help you with that Get started with css grid

  These are just a few things that I think might be helpful as you code along. Happy coding 😊✨

  01

  Marked as helpful