Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component

@cyrusyamir

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Nice for revising the responsive layout but some one tell me how to use different images in a single layout? I use display property to manipulate the images, but may seem to , that both images get loaded when opening the website, and last thanks, cheers.

Community feedback

@gautamjuyal

Posted

In order to change the image for a certain viewport, you can enclose the image inside a container and change the content property for the container for certain viewport width using media queries. For e.g. I have enclosed the image inside an img class container, now in order to change the image for a certain viewport width, i would add following chages : @media (max-width: 400px){ .img{ content:url(/../..); }

Marked as helpful

0

@cyrusyamir

Posted

@gautamjuyal thanks for this I will try it, tell about experiences and other issues.

1

@gautamjuyal

Posted

@ARSHAD023 sure. Happy to be of help.

0

@cyrusyamir

Posted

@gautamjuyal can you guide me how to remove 5 ACCESSIBILITY ISSUES 3 HTML ISSUES do in may second attempt but they change the code and the errors are showing.

0

@gautamjuyal

Posted

@ARSHAD023 since you have made the required changes in the html, try generating a new report for the solution from the view report page. Usually, generating a new reporting does the job, and a resubmission is not required.

0

@cyrusyamir

Posted

@gautamjuyal since I have generated report and solve the suggested problem, but it came with new set of accessibility issues. What I could do? Somehow I am able to make zero HTML issues, but there is access. Issues still there.

0

@gautamjuyal

Posted

@ARSHAD023 these changes might work, do let me know if they do :

  1. replace <html lang="en"> with <html lang="en-us">.

  2. replace <div class="center parent-container"> with <main class="center parent-container"> and close it with </main>.

0

@cyrusyamir

Posted

@gautamjuyal I try. Thanks for this.

0
reza 60

@rezabox

Posted

hi ARSHAD023 good job for first project but you can better style for this project for example the button of project is not good style you can use margin-bottom to better style and you can use a font-size better in this project and the title of top of the page use letter-spacing of this and font-size change 30px i think maybe is good style for this but you can practice for this and use better style . ok .Ihope Icould to help you ok have good day bye

0

@cyrusyamir

Posted

@rezabox thanks man, I do.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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