Skip to content
OverviewSolutions
12
Comments
19
Usanase Makala
@usanCode

All comments

  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    @priyanshii677, Hello. How are you doing? I have viewed your webpage on mobile and I have to say it is nicely displayed. Just the background images are not there and even in your GitHub code , you do even not mention about them in the @media screens for mobile versions. Something else, the gap between the various sub-containers is too big, especially the one between the intro and the first rating. You can try solve this with paddings/margins. About the desktop version, the intro should be written above the two main blocks below in order for the webpage to look more like the model. Personally, I prefer make use of CSS grid containers. Maybe should l introduce them to you ? Here is an interesting link about that:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout.

    Also try to fix the issues found in the report. For that ,you have just to read the links provided into that same report.

    Good luck!!

    0
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    @JOSEEDO1, Hello, how are you? I have seen your webpage's mobile version. And it is nicely displayed!! Good job!! Just fix that accessibility issue found in the report. I have also viewed your GitHub code. By taking a look at it , I get to know something..like the @media(hover).

    Congratulations for this challenge and good luck!!

    Marked as helpful
    0
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    hello Cephas,

    How are you? This challenge is a bit difficult! I have taken a look on your webpage and github code. About how your webpage is displayed, I have zoomed it on Google Chrome on higher and smaller values. I have noticed you've started to design your webpage for mobile version for higher values and when zooming for very small viewports' widths , the desktop presentation is displayed while the contrary should have been presented.

    About the image's color of the right side, I advise you to choose an option that make the color to be more darker.

    I have noticed in your code you like using flex containers. Maybe I should introduce you to grid containers. Here are some helpful links to better understand the topic:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    https://www.w3schools.com/css/css_grid_container.asp

    I really hope this help!
    Good luck!!

    Marked as helpful
    0
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hi Mathew,

    Nice work! This project is a bit challenging. I have viewed your webpage and github code. As you know there is a background color that has to be added to the image in the left side of the container. You can do this with the background-blend-mode property and verify which option is good for that and add of course a background color . Here are some links that can help to better understand the background-blend-mode property:

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode

    https://www.w3schools.com/cssref/pr_background-blend-mode.asp

    Something else, Try to zoom in Google Chrome into smaller values and see how your webpage is presented. The content of the left side of the container gets expanded and gets smaller and smaller. Try to fix that.Still concerning that issue, you've made for higher devices's viewports the design for the mobile version. As you know, We have to present two versions of the webpage: mobile and desktop. So try to make the correct adjustments.

    To fix the issues generated in the report, read carefully the links provided into that same report and make all the needed corrections and then generate a new one to see if there still some errors to fix.

    Marked as helpful
    0
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello Mathew,

    How are you! Nice work indeed! You've forgotten to add a background color in the body of the webpage and the background image also. About the background image, it is a bit tricky,.. because that image has to be repeated but on one side only. For that, try the background repeat property and see which option is suited for this. Here are some links to can help to better understand that:

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat

    https://www.w3schools.com/cssref/pr_background-repeat.asp

    Something else, when zooming in Google Chrome to higher values, the main container tends to collapse with the footer of the webpage. Try to fix this problem.

    There are also issues generated in the report,..you have to solve them. You can do so by reading carefully the links provided into that same report and find the appropriate solutions. After that, generate a new report till there is no more problem.

    Good luck!

    Marked as helpful
    0
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hi Hariz,

    How are you! This is a very special challenge for a newbie. Keep up the good work! I have viewed your webpage and github code. Concerning your webpage, try to zoom in Google Chrome to lower and higher % , you will notice the sizes of the containers at the bottom of the webpage get expanded. The width and height of each of these should be defined. About the reviews at the top right corner of the webpage, in order for them to be displayed correctly try to make use of margin/ padding. I have not been able to read your CSS code , but I have to tell you that I like to make use of grid containers when designing webpages. i am sharing with you some useful links about grid containers:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

    https://learncssgrid.com/

    About solving the accessibility issues in the report, you should read carefully the links provided into that same report and generate a new one after correction till there are no more issues.

    Good luck!

    1
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello Yokke,

    How are you? Nice work!! keep up the good job! You've forgotten to add a background-color to the body of the webpage. The container should be put in the middle of the webpage. Something else, There are some issues generated in the report. You can fix them by reading carefully to the links provided into that same report and when you've updated your code , generate a new one till there are no more mistakes.

    Marked as helpful
    0
  • Ben•40
    @bws3028Submitted over 2 years ago

    I had some issues with the method that I created this. I believe I should have utilized a mobile first approach so I wouldn't have to reuse CSS nth-child() selectors within my media query

    Responsive Social Proof Page

    1
    Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello Ben,

    How are you? This challenge is a very difficult one. I have viewed your webpage and github code. And I have noticed you've written a code for mobile version rather than to start for desktop version . I say this because in the requirements for this project, there are two designs we have to present :Desktop and mobile designs. Just take a look on the "design" folder of the project.

    I have also noticed in your Github code there is no @media screen written into your CSS code in order to determine how the webpage should be displayed into various devices' sizes. You should add them. Here some links that can help you to better understand that :

    https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

    https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    I have also noticed you prefer using flex containers.It is fine but personally I use grid containers to better determine the position of each element of a webpage. Hereare useful links about grid containers:

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

    https://learncssgrid.com/

    I have also noticed your github folder for this project does not have a README file. It should have one and written according to the README template provided by FrontEndMentor.

    https://learncssgrid.com/

    Something else , your webpage expands when zooming to smaller or higher values of the viewport in Google chrome. Try to fix that.

    Good luck!

    0
  • Daniel•170
    @Catalyst497Submitted over 2 years ago

    Which grid layout tips do you know that could have improved my styling here with lesser code? Also, which frameworks do you think are the best for css which could drastically improve my css and are easy to learn?

    Fleexbox, Grid layout

    1
    Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello Daniel, How are you? First of all congratulations for completing this challenge. Keep up the good work! I have viewed the webpage and github code. I have noticed you've written the CSS code inside the HTML sheet, it is okay but it is advised to put that code into an external CSS sheet. Something else I have noticed, there are many issues reported into the report. You can resolve them by reading carefully all the links provided into that same report . After having made the necessary adjustments, generate just a new report and that till there is no more issue to fix.

    Good luck!!!

    Marked as helpful
    1
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hi Zachidev,

    How are you? I have seen your webpage and github code. Keep up the good work! The main container of the webpage should be placed right in the it. I see it has been centralized horizontally but it has also to be centralized vertically. Try to use margin-top for instance. I have found some a link about that

    https://blog.logrocket.com/13-ways-vertically-center-html-elements-css/

    You can also read about that on MDN or w3schools for example.

    Good luck!!!

    Marked as helpful
    1
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello/Bonjour TicTac, How are you? comment ca va? I have taken a look on your webpage and github code. Well it is fine. I don't know if you have taken a look on the outcome of your work. First , when viewed on smaller screen'sizes on Chrome, the container changes it shape while it should remain the same.

    And there are some accessibility issues to fix. For that, you just have to read carefully the links provided in the report.

    Good luck and all the best!!

    Cordialement votre,

    Usan

    1
  • Usanase Makala•330
    @usanCodePosted over 2 years ago

    Hello Emmanuel, How are you? I have viewed your webpage and github code. Keep up the good work! Only there are some issues to fix:

    -First, when zooming on Chrome to smaller sizes, you will notice the main container and all its elements get expanded. I got the same problem too when doing my previous challenges. I resolved that by setting the width and the height.

    -In the main paragraph just right after the title, you've got confused about the text. You have to correct that.

    -About the README file of your github code, it should be written according to the model presented in the README-template file.

    -And finally, you have to fix the issues presented in the report. For that, you will have to read carefully to the explanations provided in the report.

    So good luck!!!

    Marked as helpful
    0