Class9-Leila-Farsani-HTML-CSS-Coursework-Week3 - #447
Conversation
jonnywyatt
left a comment
There was a problem hiding this comment.
Looks good! You've learned a lot of techniques using grid
| /> | ||
| </div> | ||
| <div class="hamburger"> | ||
| <div class="hamburger"> |
There was a problem hiding this comment.
The hamburger container is repeated twice
| margin-left: 10px; | ||
| } | ||
| .logo-img img { | ||
| display: grid; |
There was a problem hiding this comment.
So that the image fills its grid cell and gets bigger / smaller as the viewport changes width, try removing display: grid from this element, and setting width: 100%
| } | ||
| .logo-img img { | ||
| display: grid; | ||
| opacity: 100%; |
There was a problem hiding this comment.
opacity is 100% by default so this line isn't needed
| width: 250px; | ||
| height: 200px; | ||
| } | ||
| .items { |
There was a problem hiding this comment.
The nav isn't shown on small screens, so no need to style .items here
| font-weight: 300; | ||
| font-style: italic; | ||
| color: #0d3b19; | ||
| direction: rtl; |
There was a problem hiding this comment.
The direction property is for styling languages that read right-to-left, like arabic.
To right-align english, use text-align: right
| justify-content: flex-end; | ||
| flex-wrap: wrap; |
There was a problem hiding this comment.
If you remove these two lines, the items will run in a row, like in the design
| <figure class="fab-img"> | ||
| <img | ||
| class="main-img" | ||
| src="https://thebananadiaries.com/wp-content/uploads/2020/07/homemade-vegan-wedding-cake-recipe_5088-1333x2000.jpg" |
There was a problem hiding this comment.
This image is taller than it is wide (portrait), would be easier to match the design if you pick one that's wider than it is tall (landscape)
| } | ||
| .main-img { | ||
| object-fit: cover; | ||
| max-width: 50%; |
There was a problem hiding this comment.
The image should fill the width. Try replacing max-width with width: 100% and add a property: aspect-ratio: 3 (or similar value)
| .cakes { | ||
| grid-column: 2; | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
There was a problem hiding this comment.
if you try auto-fit, the images should fill the whole width of the container, on wider screens
Volunteers: Are you marking this coursework? You can find a guide on how to mark this coursework in
HOW_TO_MARK.mdin the root of this repositoryYour Details
Homework Details
Notes
What did you find easy?
What did you find hard?
What do you still not understand?
Any other notes?