Week 3: Project Business Site #383
Conversation
There was a problem hiding this comment.
Hi Kelly! Nice job with your business site! I need you to take another look at the responsiveness of the site, especially how it looks on small phones (320px width). Reach out on Stack Overflow if you need any assistance.
PS. Make sure to properly indent your code (set your VSC settings to indent 2 spaces). This will make it easier to read.
Keep up the good work!
|
Hi @HIPPIEKICK! I have made the requested changes, thank you for pointing them out, completely missed the logo and the h1 and p aligning with each other! |
| Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. | ||
|
|
||
| https://balancedbodies.netlify.app | ||
|
|
There was a problem hiding this comment.
Well done! You included a hero image and a form to your website and your website is responsive. I think you structured the website well!
Looking at your files, I think it could be good to have extra folder for the images in future especially if you have more images.
| </head> | ||
| <body> | ||
| <h1>Business name 🌻</h1> | ||
| <html lang="en"> |
There was a problem hiding this comment.
HTML: The code is well structured and clearly classes clearly labeled. For me as a reader not familiar with your code is it easier to have comments showing me where the different code sections start/end.
Was there a reason why you did not include the hero image into your header section?
code/style.css
Outdated
| input[type="text"], | ||
| input[type="email"], | ||
| input[type="tel"] { | ||
| width: calc(100% - 40px); /* Adjust the input box width to leave space for padding */ |
code/style.css
Outdated
|
|
||
| .logo-image { | ||
| width: 100px; | ||
| } |
There was a problem hiding this comment.
CSS: Good job!
Overall is your code well structured. As a reader I would love to have more comments describing the different sections :)
Well done!!!
There was a problem hiding this comment.
Thank you @gittebe for your comments! These are definitely helpful for future purposes to not just do my own work in my own world but to actually think how someone else perceives/reads my code! So thank you for pointing out the comments, I will definitely take that into consideration. Another point you commented was, why I didn't include the Hero image in my header section - the reasoning was that I wanted to include only my logo in the header section so that I could move the logo non-dependant of the hero image (e.g. using media-queries) + (without using too much divs and classes) - nothing too strategic, just a preference 😊
Still a small side scroll in mobile, have a look at how it looks for 320px width. I think you can solve it by removing the padding for .signup-container in mobile! |
Here's my PR for the Week 3 of the Business Site project
Site: https://balancedbodies.netlify.app/