@Priyanshii677
Latest solutions
Latest comments
- @usanCode
@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!!
- @J0SEED01@usanCode
@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 - @28cephas@usanCode
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 - @jos-me@usanCode
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 - @jos-me@usanCode
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 - @sj0n@usanCode
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!
