Skip to content
OverviewSolutions
6
Comments
4
Bayoura
@Bayoura

All comments

  • jjjayed•270
    @Jane72-boopSubmitted about 3 years ago

    Any feedback is welcome! I would like to ask if anyone knows a way so that the borders of my buttons are added inside instead of outside. Whenever you press it, it adds just a bit of margin to the bottom and the container expands in a very small degree.

    3 Column Card Component with Flexbox

    1
    Bayoura•105
    @BayouraPosted about 3 years ago

    Hey Jane, good job on this project!
    I would suggest adding the property border: 2px solid white to the button selector instead of :active. That way, the border will just always be there (albeit invisible due to the same colour as the button unless you click it), and it doesn't have to 'pop up' when you click the button. There will be no changes in size and your container will not expand.

    Hope this is helpful! :)

    Marked as helpful
    0
  • Bayoura•105
    @BayouraPosted about 3 years ago

    Hey, good job on this project! I only have a few thoughts for improvement:

    • I would suggest adding the border-radius property on .imgCard and .content to get the rounded corners.
    • When resizing the window to get smaller the stat headings ("companies templates queries") kind of crash into each other at a certain point. So I would add some padding to prevent that.
    • To get the colour of the image closer to the original, you could use background-blend-mode: multiply in combination with the accent colour as background-color (hsl(277, 64%, 61%)).

    Hope some of this is helpful! :)

    Marked as helpful
    0
  • Abraham•410
    @abmartinezmSubmitted about 3 years ago

    Hello guys, so I struggled a bit on order to center the profile image between the two divs I created, I solved it with an absolute position and playing with the top and left. But would be the best way to do it?

    Profile Data Card (Responsive)

    1
    Bayoura•105
    @BayouraPosted about 3 years ago

    Very nice work! :) I think your solution to center the image is totally ok. Another way to achieve this would be to use a negative margin (half of the image height) on the image. In this case you would use margin: -50px auto.
    Also, you should consider using a main tag for better structure and accessibility.

    1
  • Bayoura•105
    @BayouraPosted about 3 years ago

    Hey Jasper, nice work! You could use background-blend-mode: multiply instead of overlay to get a better fitting colour for the image. In that case I would also remove the opacity setting.

    1