London Class 8 - Delroy Gayle - HTML/CSS - Week 3 #278
Conversation
I did write a version which used a grid for the four images putting them all in the same container, one parent and 4 child items. However I could not get the hovertext and size of each image to work properly when using the grid version. It worked fine using a flex within a flex so I have continued with that version. I do not have the expertise to work out how to get the images to size properly when using a grid for the four images.
There was a problem hiding this comment.
Hi Delroy, grid can be confusing so I'd say just use grid only when necessary. You don't need to design the whole page as a grid, but use grid for the main content so it's easier for practice purpose. The rest like navigation and footer, you used flex and this is correct.
| </head> | ||
|
|
||
| <body> | ||
| <!-- Add your markup here --> | ||
| <main class="homepage-container"> |
There was a problem hiding this comment.
I would organise the tags like the following:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
I would then only have the main to displayed as a grid since header and footer sections do not require a grid. This would make your page cleaner and easier to organise
| </section> | ||
|
|
||
| <!-- NOTE: In order for this to work properly, the hierarchy and placement of these classes matters!! --> | ||
| <section class="cake-box"> |
There was a problem hiding this comment.
This section and the 4 cake images should be your main content and you can actually achieve a clean grid by having this structure:
<main class="main">
<section class="main-image">
<img alt="image1" class="images" src="image5.jpg"/>
</section>
<section class="main-text">
Welcome and other texts
</section>
<section class="small-image image1">
<img alt="image1" class="images" src="image1.jpg"/>
</section>
<section class="small-image image2">
<img alt="image2" class="images" src="image2.jpg"/>
</section>
<section class="small-image image3">
<img alt="image3" class="images" src="image3.jpg"/>
</section>
<section class="small-image image4">
<img alt="image4" class="images" src="image4.jpg"/>
</section>
</main>
You can apply the main class as a grid which contains 2 columns and 4 rows in mobile or 4 columns and 2 rows in desktop
| /* Add your styling here */ | ||
|
|
||
|
|
||
| /* |
amellie
added
LDN-8
London Class 8 - Delroy Gayle - HTML/CSS - Week 3
Homework done - Working Version - 2nd Pull Request
I do not understand enough about images and their sizing to get the Grid version of my CSS Code to work correctly.
I did write a version which used a grid for the four images putting them all in the same container, one parent and 4 child items. However I could not get the hovertext and size of each image to work properly when using the grid version.
It worked fine using a flex within a flex so I have continued with that version.
I do not have the expertise to work out how to get the images to size properly when using a grid for the four images.