Product preview card compoent using only Html and CSS

Community feedback

• 

  Galache de Toro Federico•150

  @fico444Posted about 2 years ago

  hello, I give a few tips... The more easy way to do this is using flex. You need a parent container with de display set as flex, by default display-direction is set as row, this makes the two containers inside sit next to each other without needing to use display: inline-block (for movile you must set display-direction: column using media queries). The containers have different heights because if the height property is not set, they adapt to their content using the height of their parent container as the maximum height, in this case, body. I hope I helped you. If you want, I invite you to see the solution in my profile. Surely my solution is not the best and it can be improved but it can serve as a guide. See ya 😉

  Marked as helpful

  0

  ---

  

  Abu Kesh•20

  @AbuKeshPosted about 2 years ago

  @fico444 Thank you sir for helping me out in this

  0
• 

  Petabyte•190

  @peta-8-bitPosted about 2 years ago

  @AbuKesh Congratulations on completing you first Challenge🎉🎉.

  Regarding the alignment and sizing, your current approach is not wrong, however when you set the outlines for all the elements, you can see the image is contained in a bigger portion and thus the entire layout is not actually present in the center even after using align items. Setting display:inline-block on the .image class would be better rather than setting it on con1.

  Regarding the width of the two section, Since one half is image which has a fixed proportion on height when you set width, and the other half is text only which can change proportions according to the length of content, it is hard to get the same width and height on both.

  You mentioned you are yet to learn grid, I would highly suggest, you learn the basics of flexbox and grid before doing any challenge. Also start with the QR-code component challenge which is very similar to this but less complex. Also the QR-code challenge does not really need a mobile design unlike this challenge.

  0