Design comparison
Solution retrospective
-
I didn't want to create 2 html files to show both desktop and mobile views, so I created a JS script to calculate the resize in the browser to know which image is the right one depending on my browser resolution.
-
The JS script to listen de resize event
-
Yes, but I am not sure about a specific question, but I would like to get some information about it.
Community feedback
- @Victor-NyagudiPosted almost 2 years ago
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.
Marked as helpful1@Alex-Beltran97Posted almost 2 years ago@Victor-Nyagudi Thank's for your feedback. I'll try to out this in practice for the future
0 - @MelvinAguilarPosted almost 2 years ago
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! ๐
Marked as helpful1@Alex-Beltran97Posted almost 2 years ago@MelvinAguilar Thank's for your feedback. I didn't know about that way of applying conditions with only HTML and CSS. Great!
1 - @dheeraj-90040Posted almost 2 years ago
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
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord