Skip to content
Submitted over 2 years ago

Product preview card component

cyrus yamir•90
@cyrusyamir
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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

  • Gautam Juyal•330
    @gautamjuyalPosted over 2 years ago

    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
    cyrus yamir•90
    @cyrusyamirPosted over 2 years ago

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

    1
    Gautam Juyal•330
    @gautamjuyalPosted over 2 years ago

    @ARSHAD023 sure. Happy to be of help.

    0
    cyrus yamir•90
    @cyrusyamirPosted over 2 years ago

    @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
    Gautam Juyal•330
    @gautamjuyalPosted over 2 years ago

    @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
    cyrus yamir•90
    @cyrusyamirPosted over 2 years ago

    @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
    Gautam Juyal•330
    @gautamjuyalPosted over 2 years ago

    @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
    cyrus yamir•90
    @cyrusyamirPosted over 2 years ago

    @gautamjuyal I try. Thanks for this.

    0
  • reza•60
    @rezaboxPosted over 2 years ago

    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
    cyrus yamir•90
    @cyrusyamirPosted over 2 years ago

    @rezabox thanks man, I do.

    0

Please log in to post a comment

Log in with GitHub

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