@damiandev22
@Nikola-Mitic
Submitted
I didn't create a mobile version of the site, the desktop one barely looks normal as it is, even though it's quite different from the example image.
What are some things that I did right?
What are some things that I did wrong?
This is my first time completing a challenge so I welcome any and all advices as well as criticism.
@damiandev22
Posted
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
@wetalu
Submitted
i found css very difficult
@damiandev22
Posted
this is a great aproach to the solution. I notice some small things you may find helpfull. those are:
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
Submitted
if you have any comments feel free
@damiandev22
Posted
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
Submitted
@damiandev22
Posted
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
Submitted
Project was easy, but there could be issues. point em out please...
@damiandev22
Posted
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
@parvezalam19
Submitted
i am beginner .so i am facing problems in positioning of divs.
@damiandev22
Posted
congrats on your attempt.
To fix the ACCESSIBILITY ISSUES you should
