/ Mock-up-responsive-challenge

Hi, Pedro.

You only need to have one HTML file, and that's index.html.

If you want to style the HTML differently for different screen sizes, you can use media queries.

These let you add breakpoints e.g. 992px and up, so you can add styling only for a certain screen size and smaller/bigger.

If you want to use different images on different screen sizes e.g. mobile and desktop, you can use the <picture> element.

It lets you determine at what breakpoint you want to change the current image to a different one.

Read more about the picture element here.

Hope this helps.

Good luck with your other solutions.

Hi @Alex-Beltran97 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

I have some suggestions you might consider to improve your code:

• This solution seems overly complicated to me. To know the dimensions of the device, it is enough to use media queries in CSS or <picture> in HTML and give styles. If there are things that can be done with CSS instead of Javascript, use CSS directly and leave Javascript last.

• You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, and prevents you from having two html file

Example:

<picture>
   <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg">
   <img src="./images/image-product-desktop.jpg" alt="your alt text">
</picture>

• The footer element should be outside the main content (<main>).

• The <span> element is an inline container to group text, this element does not admit other elements like <div> or <p> inside it

I hope those tips will help you! 👍

Good job, and happy coding! 😁

Hi, nice to meet you, The image size is too big and everything is good I think this is your 1st project. so keep learning and practicing. Use flexbox instead for a good look.

Thank you