Open
Conversation
…t devices in the browser’s developer tools. However, when viewing the website on a real mobile device, the backdrop filter does not work as expected. I am adding -webkit-backdrop-filter: blur(10px); to ensure maximum compatibility across all browsers.
HIPPIEKICK
approved these changes
Sep 3, 2024
Contributor
HIPPIEKICK
left a comment
HIPPIEKICK
left a comment
There was a problem hiding this comment.
Hi Jonas, fantastic job with your business site! ⚡ Some tips coming up!
HTML
- Your HTML is well-structured and easy to read. You’ve used semantic tags like
<header>,<nav>,<main>, which is excellent for both accessibility and SEO. Keep this up! - Use
type="email"for the email input field instead oftype="text". This will trigger the browser’s built-in email validation and provide a better user experience. - Your form elements are well-labeled, which is important for accessibility. Good job!
CSS
- You’ve imported Google Fonts, which adds a nice touch to the overall design. However, consider specifying fallback fonts for better compatibility:
font-family: 'Ubuntu', sans-serif;
- The buttons and input fields are well-styled and consistent with the overall theme; the whole page looks so neat!
Keep up the great work, and I can’t wait to see what you create next. 🚀
| ## The problem | ||
|
|
||
| Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? | ||
| I encountered an issue where the backdrop filter blur worked in the browser's developer tools but not on an actual mobile device. I resolved this by adding -webkit-backdrop-filter: blur(10px); to ensure it works properly across all browsers. |
| top: 0; | ||
| left: 0; | ||
| padding: 10px 0; | ||
| box-shadow: 5 2px 5px rgba(0, 0, 0, 0.1); |
Contributor
There was a problem hiding this comment.
The first value here (for the horizontal shadow) doesn't have a unit. Should it say 5px?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This week's work: Project business site.
My link: https://jonas-busines-site.netlify.app/