This was my first time using media queries, and I feel like I didn't nail the scaling of some of the card elements. Specifically, <div class="payment-plan"> (line 29) didn't scale down as I shrunk the view smaller than the 375px for mobile. Is there a better way to do it than how I did?
Nombiembre
@NombiembreAll comments
- @awitmer1Submitted about 1 year ago@NombiembrePosted about 1 year ago
Hello, Nice job, you really nailed the look!
In this challenge theres no need to use media queries (maybe only to change the background image to mobile)
The class payment-plan doesn't shrink right because it does not has a max-width so it just overflows, but, don't add a max-width, there's a better solution and it is in how you structure your index.html
In your main card you used three div's, one for the "header", the second one for the payment, another for the button, if you look close, is better to just use two div's, one for the image, and the other one for the content itself, here put a max-width of the girl image width, and that should fix the line 29 error.
In the second div where is your content you just add a padding and a display grid to add a gap and therefore, a margin between elements. Theres a channel i highly recommend for css and is called Kevin Powell, also, heres a video of a similar challenge using only two div's
Great job on your project, and keep up the excellent work! 👍
0 - @Grunt395Submitted about 1 year ago
Is it good practice to add a class to almost every element I've styled? Or is it unnecessary?
When adding a margin between elements, is it better to use margin-top or margin-bottom?
Is it better to directly insert an image into the HTML and then style it, or should I instead fill a preset area with an image using the background-image property?
@NombiembrePosted about 1 year agoNice Job!
1. I dont think is a problem unless you are repeating the same properties in a bunch of classes, in that case you could use custom properties and utility classes.
2. You could use "display: grid;" in the parent and then use "gap: ;" to add a margin between elements
3. In this case i think is better to use the background-image, with background-repeat: no-repeat; and more properties to make it look good.
I recommend you an excelent youtube channel called Kevin Powell is so good for learning css
Marked as helpful1