I found this project a challenge because it put my use of Flexbox and justify-content to the test but I managed to overcome this challenge, Overall I like that I completed this project without help.
The only thing that I am unsure about is the use of Grid and Flexbox and where to use it.
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
Just the basics HTML and CSS. I couldn't really tell but is there a box shadow on the Proceed button? It's pretty small. How'd you do it?
Honestly looking at the solution I'm pretty bad at giving vertical padding to my things. Especially with the card content. Embrace the whitespace everybody lol
