I am unsure about my layout on mobile - the viewport height seems to not take into account the browser's navigation bar, therefore the credits are sometimes off-screen and the page needs to be scrolled to view them. Is there a good solution for this?
Hi! I have some suggestions:
height: 80% - 80% of height of the parent tag) to prevent scroll. However, if your pages may be high enough to scroll, replace height: 100vh to min-heigh: 100vh. It will prevent the page to look offset.div (that contains <QrContainer /> and <AttributionContainer />) display: flex (that you have already done). Than set <QrContainer> root component with property flex: 1. It will stretch your card with maximum height and also contain AttributionContainer in place. Learn more about flex-grow.I hope it helps 😊
Hello everyone! 👋
I finished the Results summary component! It felt amazing to complete another challenge this month <3.
The responsiveness of the website, I can't make the page responsive. If you have any ideas please feel free to correct me. Also the part where if you click the submit button "Thankyou" component will display it took me hours before I solve that : >
The responsiveness of the website I can't make the page responsive. If you have any ideas please feel free to correct me.
About the responsiveness please feel free to input your best practices so I can apply this challenges and also for the future projects/challenges.
Hi. I looked at your solution and have some suggestions.
% value to make it stretch, max-width and max-height.<App/>) instead of doing it in <Ratings> component. Also learn more about different hooks in React.const [isSubmitted, setIsSubmitted] = useState(false)
// in the App return block:
return (
{!showThankyou ? <Ratings/> : <Thankyou/>}
);
if (!selected) return;
Hint: you can look at my solution of this challenge. It contains everything that I have mentioned here
Hi! Took a glance and have some suggestions
{cursor: pointer} CSS property to buttonsflex or grid display property and set gap or column-gap and row-gap. It is more convenient.main tag. Learn more about semantic tags.<body>
<main>...</main>
</body>
Does my code follow best practices? What could I improve on?
Hi! I viewed your code and I have a couple of suggestions for best practices.
main tag after body tag. It is for SEO purposes.<body>
<main>...</main>
</body>
width, height). It prevents page's content from "jumping" when you load site with poor internet speed. To test it, if you use Chrome, open dev tools, go to Network, and pick network type: slow 3G.header tag is used to contain navigation panel of a site. It is not appropriate to use it in content of the site. Read more abour semantic tags and how to use them.I found difficulties while giving height and width, like how do I know the exact height & width of the box. I just did experiments to look like same as the image. But with a few hit and try it happened. It was a good project for a beginner like me.
Hi there! I want to give you some pieces of advice how to solve problems which I faced during this challenge too and level up your frontend skills.
How to avoid Accessibility report warnings.
Use semantic HTML tags to avoid warning "Document should have one main landmark". Just wrap your div with class "attribution" in main tag like so:
<main>
<div class="attribution">
</div>
</main>
How to solve difficulties with height and width.
Before implementing a challenge in a code you can try to copy the given design in Figma. Just open Figma, place the design image in it, change the opacity of the image to 50% and just create design blocks over the image. Doing so you will be able to know height and width of some basic design elements.
I hope, my feedback was helpful 💪
Let's improve our frontend skills together 🎉