@danielemanca1983
Posted
Hey there,
I will be providing you some guidance on how to improve the solution you submitted, however I would suggest that, not only you look into flexbox in terms of positioning elements on a page, but also review HTML, specifically headings 1 to 6, as headings should not be skipped, let's say for instance as on your solution, from 1 all the way down to 6.
I will be touching on the mark-up code first and then move onto the CSS.
HTML
-
Your code contains two containing <div>s, one only is sufficient, and I would suggest to take a look at the <main> tag as well, which in modern web development we can wrap content into, see its usage on this MDN Link
-
So to recap briefly from the above, you could have: main followed by the card component, no other containers.
-
As already mentioned by someone else the <h1> does not need to be split in 3, one tag is sufficient and the text will wrap by itself
-
Also, as someone already mentioned, in order to position the discounted price and the original price, you could look into flexbox, for instance you can have a heading <h2> in there with a <span> for the smaller text, display the heading as flex and then align-items: center to vertically center the smaller text with the larger one.
-
The mark-up code for the <button> element is good.
Now the CSS
-
I think that, again in terms of flexbox, you can position the component vertically and horizontally centered on the page, by using the flexbox properties or also grid, they both do a great job at doing this.
-
Using the float property requires the element coming right after to be cleared, with the clear property. However if you used flexbox or grid that would not be necessary at all.
-
I would suggest not to assign a fixed width and height to the img, it kills it from being responsive at all, instead give it a max-width.
-
The .btn CSS rule contains properties which are not required based on the given design for the component. For instance the <button> in the design only makes use of a bold green background color, no border, for which you can use the border: none; CSS property, and then apply all other properties to the button to style it as per the provided design.
-
The component on the mobile design displays the content in a vertical fashion, one potential way of achieving that, is to use flexbox on the component to make its children flex items and then use the flex-direction property for smaller viewports to display the content as a column.
Marked as helpful