@Nikola-Mitic
Latest solutions
Latest comments
- @damiandev22
Hello, I want to congratulate you for this proposed solution that you have given. It has turned out quite well, however there are some details that you can improve.
1- I would like to recommend you to make measurements to the proposed design to achieve a result as close as possible to the real one. I do it with Photoshop, so you can start with the card being 600px wide and 500px tall.
2- Use units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices. To save your time you can code your whole page using px and then in the end use a VsCode plugin called px to rem here's the link → https://marketplace.visualstudio.com/items?itemName=sainoba.px-to-rem to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem
3- Use css reset to have a good starting point, e.g. https://piccalil.li/blog/a-modern-css-reset/. However, if you don't use it, it would be good if you declared in the body box-sizing:border-box; so that the card always stays the same size as you declare and does not grow when an element has padding.
4- The left and right sections are half the width of the card. you can declare it with width:50%.
5- They ask you for an image for desktop and another for mobile. You can solve that with the picture tag. THE PICTURE TAG let's you deal with the multiple images in this challenge. So you can use the <picture> tag instead of importing this as an <img> or using a div with background-image. Use it to place the images and make the change between mobile and desktop, instead of using a div or img and set the change in the css with display: none with the picture tag is more practical and easy. Note that for SEO / search engine reasons isn't a better practice import this product image with CSS since this will make it harder to load the image. Manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending on the device desktop + mobile.
Check the link for the official documentation for <picture> in W3 SCHOOLS: https://www.w3schools.com/tags/tag_picture.asp
See the example below:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width:auto;"> </picture>Here's my solution for this challenge if you want to see how I build it: https://www.frontendmentor.io/solutions/solution-to-product-preview-card-component-UynGgj6mJ0
Those are some of my suggestions. I hope it helps you.
Marked as helpful - @Zeeshanalt@damiandev22
hi, I have an advice I think might be of help to you. If you wrap the "improve" and the "scan" classes inside a div you can treat them as a unit and give them proper padding and margin so they can be aligned the same. greetings.
- @wetalu@damiandev22
this is a great aproach to the solution. I notice some small things you may find helpfull. those are:
- the text color in the button is white
- the round corner in the image side is missing
you can align the card easily with flexbox using the following in the body tag :
display: flex; flex-direction: column; height: 100vh; justify-content: center; align-items: center; - @lexifoster-code@damiandev22
good job. there is something in your solution I was trying to understand and got me thinking. That is the positioning of the image because there is a bit of space larger in the right side. In order to center it better you could change two things. In the "qr-card" you could add a padding of 10 px instead of the margin of 10px in the img. .qr-card{ padding: 10px; }
in the "qr-code" change the fixed width of 275px for a 100% width and erase the margin there. .qr-code { /max-width: 275px;/ width: 100%; border-radius: 7px; /margin: 10px;/ }
those changes will center the image better. good look coding
- @Josepablo333@damiandev22
Hi Josepablo, your solution looks quite similar to the design. Nevertheless in my browser (Google Chrome) the text overflow the card. I think this is happening because you are fixing the height of the card. in my opinion you should remove this line (height: 80vh;) Also you should watch the color of both paragraphs in order to achieve a most similiar result. keep up.
- @Benaks@damiandev22
Hello and congrats, you did well on this challenge. I think that In order to achieve a most acurate result you could measure the card in the given design, so you can have an idea of the size the card should have in your solution. for that you can use Photoshop because doing so blindy is more difficult. in this challenge the card has 320px wide. Only that for now. keep up.
Marked as helpful
