Skip to content
OverviewSolutions
24
Comments
3
Ramesh Kumar Munjal
@rameshkmunjal

All comments

  • impure•40
    @z0ddedSubmitted about 2 years ago

    I tried to make the card using flexbox initially, couldn't do it because the image-container didn't take the 50% width, it just kept showing there was available space without actually using the space.

    How should I fix this issue?

    Product preview card component using pure css

    2
    Ramesh Kumar Munjal•580
    @rameshkmunjalPosted about 2 years ago

    Hey @z0dded Congratulations on completing the challenge. You have done a good job. Regarding the problem you discussed , I would like to say - when I make changes in your css and use display:flex, found no problem. I suggest you to try once again . I made following changes and the page is ok after making these changes. #card{ display:flex; border-radius: 0.5rem; background-color: var(--white); width:40rem; height:30rem; } #image-container{ width:50%; border-top-left-radius:0.5rem; border-bottom-left-radius:0.5rem; height:100%; background-image:url(./images/image-product-desktop.jpg); background-size:cover; } #content{ height:100%; width:50%; padding:2rem; font-family:”Monserrat”, sans-serif; } Please revert if you still face this problem. Thanks for reading.

    0
  • Ramesh Kumar Munjal•580
    @rameshkmunjalPosted about 2 years ago

    Hello @Jbsmall17 Congratulations on completing this challenge. I suggest to remove following shortcomings in the page to look it better.

    1. As per design nav should not show in mobile version but it is showing .
    2. While setting media query you have given min-width 375px and max-width 1000px . which makes no sense . It covers all types of devices like mobile , tab and desktop. For mobiles , set media query 375-500 and for desktop from 992-1440px.
    3. In mobile version , Container is not centrally aligned . You can do this by styling body tag like this : body{ min-height:100vh; display:flex; justify-content:center; align-items:center; }
    4. In mobile version, Main element is not properly styled . Hence image is overflowing its height .
    5. P element of main section is not styled . set its width and line-height properties to look like design.
    6. Apart from the above , there are accessability & html issues as per report. Like img element should always have alt attribute and button should not contain anchor tag etc . You can remove them to get zero error report.

    I hope my feedback will help to make your code better. Thanks for reading.

    0
  • Ramesh Kumar Munjal•580
    @rameshkmunjalPosted about 2 years ago

    Hello @Tuchpon Congratulations on meeting Blogr-Landing_page challenge.

    I observe following shortcomings in your design . You can improve the page after removing them.

    1. In Desktop design, nav is not as per design. You have given hamburger menu in place of left and right ul.
    2. As per design in challenge , In main part of the page ( complete page minus header and footer), in each section one side is text and other is image . in first and third section you have stacked them one over another.
    3. In mobile design, margin-bottom of section-2 can be reduced. Such large space is not looking well.
    4. Apart from above , you may find some errors in accessability report which can also be removed by slight change in your code. All page content should be contained in one landmark. So your page should be contained like this inside body tag. div.wrapper – nav – main-footer-wrapper-closed. You should use semantic html as max as you can.
      I hope it helps your to improve your skills .

    Thanks for reading .

    1