@ApplePieGiraffe
Posted
Hey there, Dawid Keyser! 👋
Good work on this challenge! 👍
I haven't used Tailwind or Astro before, so I'm afraid I can't offer you much help with that, but I have one or two other small tips for you. 🙂
Instead of adding a fixed width to the card in the mobile layout, I would suggest giving it width: 100% and then adding a max-width to it to prevent it from becoming too wide. This way, the card component should adjust to the viewport width (and not cause any overflow) on smaller screen sizes.
Also, I would leave the alt text for the icons in this card empty since they aren't important for the content of the card and don't need to be noticed and read by screen readers. 😉
Hope you find these tips helpful. 😊
Keep coding (and happy coding, too)! 😁
Marked as helpful
@dawkey95
Posted
@ApplePieGiraffe I will look at implementing that into my next project thank you for the advice 🦒happy coding.
@dawkey95
Posted
@ApplePieGiraffe Hey when you work with breakpoints in the context of what you said with w-100% how do you implement the breakpoints for different screen sizes? It has been a few years and getting tripped up with max-width min-width etc.
Mind just helping me wrap my head?
@ApplePieGiraffe
Posted
@dawkey95
I try to create most responsive layouts with just two media queries if I can so that I have mobile, tablet, and desktop styles. So maybe something like this:
.card {
width: 100%;
max-width: 30rem;
@media (min-width: 768px) {
max-width: 40rem;
}
@media (min-width: 1110px) {
max-width: 50rem;
}
}
That's just a quick example, it really depends on what kind of design you are working with and how the layout changes.
I'd recommend checking out the code for any high-quality projects you find on here and seeing how other people approached certain layouts or challenges. It'll give you ideas and help you write and reason about your own code. 😉
Marked as helpful
@dawkey95
Posted
@ApplePieGiraffe awesome thanks. I am currently working on the Skilled E-Learning Challenge and having bit of struggle with the hero background image size/positioning but I guess it is part of the experience and learning 😊
thanks for the input and advise
@ApplePieGiraffe
Posted
@dawkey95
No problem! 👍
The layout of the hero section in the Skilled E-learning challenge can be tricky! 😅
Here's a solution I completed some time ago with a similar hero section design (e.g., image on the left that overflows the viewport) if you'd like to check it out for any ideas. 🙂
Keep practicing and with time you'll find better and better solutions to layout problems. 🙌
Marked as helpful
