@donovangg
Posted
Hi Jaheim! It's looking good so far. The link to the repo isn't working so I'm viewing your code through devtools. Good job on using flexbox on your <div class="container"></div>
to center align it! You can use Flexbox and Grid for anything but in this context you can use it for the content as well.
Right now you've got:
<div class="container">
<img class="image" src="images/image-product-desktop.jpg" alt=[dont forget your alt tag for accessibility!] />
<div class="content">
//Your content here
</div>
</div>
Right now it seems like there isn't a mobile layout but flexbox would help out a lot!
I think it would help out a lot if you were to to wrap your <img />
and your <div class="content"></div>
in another div. Lets just call it card.
<div class="container">
<div class="card">
<div class="image-wrapper">
<img class="image" src="images/image-product-desktop.jpg" alt=[dont forget your alt tag for accessibility!] />
</div>
<div class="content">
//Your content here
</div>
</div> //card div
</div> //container div
It looks like div soup for sure, but it opens up being able to use display: flex
or display: grid
on your <div class="card"> element. So for a mobile layout you can now use flex-direction: column
or flex-direction: row
for your card.
For example since you went desktop first you can write your media query
@media(max-width: 340px) {
.card {
display: flex;
flex-direction: column;
}
}
this way on smaller screens your <div class="image-wrapper"> and your <div class="content"> are stacked on top of each other. For bigger screens you would do flex-direction: row.
I apologize if I went on for too long. Hopefully it made sense and I didn't give you bad markup and css lmfao. Good job completing the challenge! You're on the right path
Marked as helpful
@Jaheim-Douglas
Posted
@donovangomez Thank you for the feedback It's really nice to see people help each other, I plan in the future to learn more about responsive designs so that my websites are accessible to everyone.
Also thank you for explaining grid and flexbox and when to use it I appreciate it.
Thanks from Jaheim
@donovangg
Posted
@Jaheim-Douglas Of course Jaheim, you're doing well! There's a bunch of cool css resources. These are some of my favorites if you have time to check them out.
-
Kevin Powell is the "King of CSS" and done some stuff with Frontend Mentor as well.