@Kitty10206
Latest solutions
Latest comments
- @Maritxx
Hi! With how you have set up your media queries now, you will only go to the mobile design once your screen-width is smaller than 375px. Seeing as the design is wider, it cuts off most of the boxes. Along with that, screens that are over 1800px wide don't see the desktop design either as the cards appear as blocks under each other.
You could start coding by setting up the mobile-layout (so the way you've coded for the media-query with a max-width of 375px). You would not need a media query for this. You then figure out at what width you could go to the desktop design and set up a media query for this. For example, a min-width of 782px. Then, every screen bigger than that would see your desktop design. You don't necessarily have to set both and min- and a max-width at the same media-query.
It can be quite confusing when first starting to learn, but I'm sure you'll figure it out! Good job on your design! It looks great and just needs a little change on the media queries themselves to make it appear on different screen-widths. ^^
Marked as helpful - @xenovialara@Maritxx
Hey!
You set the background-color and color on your buttons by including the ID of your div (#cardtwo button). You then tried changing them by selecting just the button element (button:hover). ID's are more specific than elements, so you were unable to change the background-color and color (it was overridden by the color/background color you had set on the #cardtwo button). Opacity worked, because you had not set that property before, so it did take effect.
For the :hover effect to work in this code, you'll have to target #cardtwo button:hover. You can also change your styling to just target 'button' instead of '#cardtwo button', your button:hover will then also work.
It might help you to look into CSS selectors to learn more about this. ^^
Marked as helpful - @mohit834@Maritxx
Hi! While I don't think I have enough knowledge to help you with your media queries, here is something I think might be useful for you.
It is enough to add border-radius to your container (I would set it to the card div) instead of setting it to the image and content separately. When you do this, and add 'overflow: hidden' to the container as well, it will work! ^^ The reason this hasn't worked for you is that there is content in the div, by removing the overflow of it, the border-radius will work as intended. I only found this out today as well so thought I'd share this with you.
Good job on your solution!
Marked as helpful
