Zaw PR#6
Conversation
| .teapot-img, | ||
| .flowers-img { | ||
| width: 100%; | ||
| height: auto; |
There was a problem hiding this comment.
This needs to be height: 100% for the image to fill the whole space allocated.
The parent of this image, wiseleaf-img1, is correctly set to the right section of the grid, but the image is not filling that space (it's not filling its parent).
Set the height to 100% and also remove the margin-bottom on the parent - it also interferes with how the image fills the space.
|
|
||
| /* ----------Media query section starts here-------- */ | ||
| /* ----------- media query for tablet------*/ | ||
| @media only screen and (min-width: 400px) { |
There was a problem hiding this comment.
This is a little early to start tablet. Small tablets start around 600px wide, but many codebases start tablet designs from 768px wide (the width of early ipad versions)
| <footer> | ||
| <Footer /> | ||
| </footer> |
There was a problem hiding this comment.
Instead of doing this, just use the footer HTML tag in your <Footer /> component.
Then, you don't need to repeat it twice here. So it should just say:
<Footer />
|
|
||
| function Home() { | ||
| return ( | ||
| <div> |
There was a problem hiding this comment.
This div is not necessary.You can use the empty Fragment tags <> and </> to avoid the React warning.
These will satisfy React and remove the warning, but they will disappear in the final render.
|
|
||
| .main-div { | ||
| display: flex; | ||
| flex-direction: row; |
There was a problem hiding this comment.
This line is what's causing your Reservation page to be too wide. You are saying "put all the elements next to each other in a row" but you aren't controlling how wide these elements are, so they just take up as much space as they want - and that adds up to more than 100%.
Change to this flex-direction: column and you will already be much closer. Then you can tweak the position of the large leaf icon using some tricks like negative margin-top to push it up a bit (not great practice but in this case it's just a little help and could be worth it)
LucyMac
left a comment
LucyMac
left a comment
There was a problem hiding this comment.
Great work @zkhing! You've accomplished some really complex layouts and well done on the carousel! 🙌🏼
Try to split your CSS up more so it's not all in index.css. The minimum should be to split it by page (Home.css, Reservation.css, Menu.css). For common components like Header and Footer, keep the CSS inside the component (Header.css, Footer.css etc)
🤩
Thank you so much for feedback @LucyMac. I have made the changes accordingly :) |
2 participants
No description provided.