Responsive solution using HTML/CSS only

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hiyo,

  It looks pretty close, well done! I actually have two suggestions though:

  First, your box-shadow: as a general rule I'd say, if you can see that someone used box-shadow, they didn't do it right. For the best result, go with something really subtle! Box-shadow is there to give an item some depth without being very visible. I usually go with small values, like this: box-shadow: 0 2px 16px 0 rgba(146, 146, 146, 0.3). As you can see, even on the colour I added some opacity. Going with small values (0.15-0.3) is a good idea if you want to make subtle box-shadows!

  Second thought: although there's no media query needed for this challenge, it's nice to think of all screen sizes, even for small ones. For this, it's good to make the image responsive by adding: max-width: 100% and height: auto to it.

  Marked as helpful

  2

  ---

  

  Esteban Reyes•40

  @Estebankdb17Posted almost 3 years ago

  @FluffyKas Fluffy! Definitely I'll be more careful with box-shadow, thank you for your time and your feedback! It's fantastic learn from others😁

  0
• 

  Kacper Kwinta•1,405

  @kacperkwintaPosted almost 3 years ago

  Some tips:

  • try to avoid styling <main> tag, because he is for grouping elements, not for setting styles
  • box-shadow in design is centered, yours is more to the right
  • entire box is a little bit too big as you can see in design comparison

  Overall good job, keep work (:

  Marked as helpful

  1

  ---

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  @kacperkwinta @kacperkwinta What's wrong with styling a main? I'm genuinely curious. Divs are also there for grouping elements but can also be styled. I frequently apply some general styles to main if I see a need for it.

  In any case, this is just a small component so my guess would be that most people include a main tag to avoid issues in the report. He could've made a div/article called "card" for wrapping the content and then style that but I'm not sure it's very necessary for such a small challenge.

  That's just my 2 cents. I'm really curious if there's any reason to avoid styling main, maybe I learn something now!

  1

  

  Esteban Reyes•40

  @Estebankdb17Posted almost 3 years ago

  @kacperkwinta Thank you Kacper! I didn't pay attention with the box-shadow. My projects in general are a little bit big in comparison with design, I think it's because I work on a laptop :/

  0

  

  Kacper Kwinta•1,405

  @kacperkwintaPosted almost 3 years ago

  @FluffyKas Yeah, it is not incorrect to style these tags, but they are not solely for styling purposes as they serve a semantic function

  0