@MelvinAguilar
Posted
Hello there π. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML π·οΈ:
- Use semantic elements such as
<main>
and<footer>
to improve accessibility and organization of your page.
CSS π¨:
- it's important to follow the guidelines provided by the project's style guide. This includes using the specified font and colors to ensure consistency and maintain the intended look and feel of the design.
- You don't need to add
font-family: "Outfit", sans-serif;
to each<p>
,<h*>
separately. Instead, add it to body.
- You should use the
box-sizing: border-box
property to make thewidth
andheight
properties include the padding and border of the element. This will make it easier to calculate the size of an element. You can read more about this here π.
- Use
min-height: 100vh
instead ofheight
. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.
- Setting the max-width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width with a fixed unit like
320px
or20rem
to make sure that the component will have a maximum width of320px
on any device, also remove themax-width
property with a vw value.
- For a responsive and resizable component, consider using the previous
max-width
for the width and addingpadding
to avoid border touching the image. Also, setwidth: 100%
for the image to fit the size of the component.
-
Setting the element to flex doesn't add much value unless you use
gap
to provide spacing. If you don't usegap
, you can keep your element without usingflexbox
..wrapper_img_content { background-color: white; border-radius: 23px; max-width: 320px; padding: 20px; /* padding: 4vw; */ /* display: flex; */ /* flex-direction: column;; */ /* align-items: center;; */ /* width: auto;; */ } .img_content { max-width: 100%; border-radius: 2vw; /*max-width: 70vw;*/ /*margin-bottom: 3vh;*/ }
I hope you find it useful! π Above all, the solution you submitted is great!
Happy coding!
Marked as helpful