P
@jacksen30
Latest solutions
Latest comments
- @Mtalafa
Hi Jacksen,
Well done for completing this challenge.
Your card extends from top and bottom because it is centered. So when the height changes it is added from both top and bottom to keep it centered.
I have not tried this, but I`m guessing you can use grid on your accordions to make sure they have the same height and then leave one of them open when the page loads in. This way your box will stay the same height when you open another one.
Marked as helpful - @Veksoe@Mtalafa
Hi, Annika
Regarding your question about the sizes. 1440px refers to the size of your design. In your case this is the main. You can remove the margin from the main and add max-width 1440px. then in order to center it you use flexbox on the body adding a min-height of 100VH align items and justify content center
If you want it perfectly centered you need to remove the footer that is added by default. The one saying challenge by frontend mentor
Hope this helps. Have a good day
Marked as helpful - @bdal90@Mtalafa
Hi Dalma, -Well done for completing this challenge. -Here are some suggestions. -I noticed that as you hover over the button everything gets a bit bigger because of the border of the button. You can fix this by adding the border to the original state of your button and make it same color as the background. -Another way to fix this is to remove the border from the button:hover and replace it with this:
'box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, 0.75);'
This will add a shadow inside the button and it will not mess with your spacing. -I also noticed that you did your media queries for 400px max-width. Your design gets messed up before it reaches 400px. I would recommend changing it to 650-700px. -Hope this helps. Minden jot kivanokMarked as helpful - @FridaWaldt@Mtalafa
Hi, well done on completing this challenge.
I`m not very good yet with JavaScript but I did have a quick look at your CSS.
You can add this: transition: all 0.3s; to everything that changes on hovering, like for example the .lastweek
This will make the transition from the original color to the hover color more smooth.
Marked as helpful - @davidgrossmann@Mtalafa
Hi, well done fore completing this challenge. Looks good and is responsive. About your question. when to use Gris and when to use Flexbox. You can use Grid when the size of things is important . In this case the size of each article is important so you used Grid. And you can use Flex when size is not important, like putting the small img and the name next to each other. Hope this helps. Happy coding
Marked as helpful - @parkerrn9@Mtalafa
Hi there, Well done for completing the challenge, however it is totally unresponsive to smaller screens. So here are some suggestions: Remove the 'centered' class. To center everything you can add this on the body: display: flex; align-items: center; justify-content: center; min-height: 100vh; You should use CSS grid to solve this challenge. From the 'wrapper' remove: width: 350px; padding: 5em 0; Now add to the 'wrapper': display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); Now each of your 'person' boxes is a grid item, so you can lay them out one by one like in the solution. If you don`t know how CSS Grid works I recommend watching some videos and reading about it.
