@FluffyKas
Posted
Heyo,
It's not a bad start but there's a few issues going on here ^^
-
Using vw isn't a great solution for defining a width, at least not in itself. Your
max-width
should always be a fixed height, 30rem/400px for example (or whatever fits this challenge) . If this doesn't alone solve your problems, you can combine it with awidth: 90%
(just an example, again), the two together will take care of your widths on most screen sizes ^^ -
Don't give the
body
aheight
, usemin-height
instead. -
Alt texts shouldn't contain the word image, picture etc, using an img element is self-explanatory. It's just supposed to be a text description for those who can't see the image, so "A lady listening to music via headphones" is perfect ^^
-
Giving your images a
display: block
,max-width: 100%
andheight: auto
will make sure they resize in a responsive way, you'll rarely ever need more than this. Your size problems right now come from other sources, like the widths on your containers. -
As for the button hover, I'd just keep the same colour and lower to opacity to like 0.8 on hover. Lowering opacity is frequently used for hovers, so just keep this in mind if you feel like you're struggling to come up with the "right colour".
-
The box-shadow on the button also seems a bit off, try this instead:
box-shadow: 0 15px 20px 0 hsla(245, 75%, 52%, .25)
. Reducing opacity on the colour is a great trick here too, if you'd like to make more realistic box-shadows.
Marked as helpful
@TotallySly
Posted
@FluffyKas
Thank you for your help and feedback.
That is some great advice. I will play around with the code now! But this advice is just what I am looking for! Thank you so much.