Order Summary Component | HTML, CSS, BEM, MobileFirst

Hola carlos tengo 2 recomendaciones principales, al body quitale el position: absolute que esta demás y agregale cambia a background-size: contain este es el indicado para este tipo de proyecto. Ahora respecto a las imagenes es cierto que frontend mentor te dice 375px para mobile y 1440px para escritorio pero tendrías que tener en cuenta es que si o si en esos pixeles se debe cumplir tales vistas pero son guía, esto lo digo porque la media querie que usaste para el fondo se aplica apenas llega a 1440 pero mi PC tiene menos de 1440 px de ancho y eso que es de escritorio entonces me sale la vista de mobile y no es lo adecuado. Puedes usar 1240 px para la media querie ya que si no me equivoco es lo mínimo para pantallas o usar una cantidad menor sin problema la idea es que si o si quede bien en las medidas anteriores mencionadas pero no es un requisito obligatorio que se cumpla para tal medidas. Por ejemplo para moviles hay desde 320px hasta 360px como mínimo, frontend mentor masomenos pide que mínimo cumplas para 375px así que son cosas que debemos tomar a consideración.

La otra recomendación es usar h1 en ves de h2 para el Orden Summary el motivo es que mínimamente debes tener uno por proyecto en tu caso no tienes, y masomenos funcionan como los titulos y subtitulos en la vida real, osea el h1 es el título único que debe haber por página en tu proyecto y los demás son subtitulos osea el h1 tiene sus h2 y los h2 tienen sus h3 así sucesivamente y de modo incremental.

Por lo demás tu proyecto esta bastante bien hasta donde pude verlo así que felicitaciones, sigue así. Éxitos en tus proyectos!

Hi there! 👋

I agree with @Sdann26 that those sizes on the style-guide.md are just some guide for you and have nothing to do with the media queries. They are telling you that "this is how your website should look like at these screen sizes". As frontend developers, we should keep making your website looks good in between those screen sizes.

Some suggestions from me.

• Always specify the type of the button. In this case, set the type of them as type="button". It's going to prevent the button from behaving unexpectedly.
• For the @media query unit, I recommend using em instead of px. em unit behaves more consistently across all browsers than any other units. Zell Liew has a good blog post that explains this in great detail.
• Prefer unitless numbers for line-height values to avoid unexpected results. The MDN documentation explains it well.👍
• Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs. Also, I have a great article that will explain rem and em units in a simple way.

Hope you find this useful!