Skip to content
OverviewSolutions
7
Comments
10

Ricardo Magalhães

@AmodeusRBrazil180 points

I'm a Frontend React developer always eager to learn what's the newest good practices and most effective tech tools in the Dev World!

I’m currently learning...

Typescript & Redux

Latest solutions

View more solutions

Latest comments

  • Ricardo Magalhães•180
    @AmodeusR

    I believe you could use the background image with width: 100vw. You didn't explain the actual problem so it's hard to tell how to solve it.

    Otherwise if the background is not a image but svg circles, to resize them as screen grows or shrink, you can use clamp to determine a minimum, ideal and maximum size to it based on the viewport width. Search for the clamp css function.

  • Ricardo Magalhães•180
    @AmodeusR

    Since the hover effect is the same on every button, you could just use a common class among them and apply the desired effects. When it comes to the background, just use the alpha channel to make it transparent, thus not needing to specify background colors for the buttons whilst being able to use it anywhere without worries about the background.

    How to use the alpha channel? The alpha channel is the fourth parameter in the colors. There are plenty of ways of writing it, for example:

    rgba(30, 30, 250, 0.5) hsla(200, 80%, 50%, 0.5)

    This "0.5" is the alpha channel which will make it transparent. There are many other ways of using the alpha channel, even with regular rgb/hsl. You can learn more about them through these links:

    https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque). https://developer.mozilla.org/en-US/docs/Web/CSS/alpha-value

    Also, you should add the cursor: pointer to your mouse when hovering interactable elements on your page to make the user experience better.

  • Ricardo Magalhães•180
    @AmodeusR

    If you delete margin: auto and height: 100% properties it'll fit correctly all the time. I'm not sure why it is happening, but I do see that margin auto tries to center things vertically, instead of stretching, which is what needs to occur so every card stays the same size all the time, whilst the height: 100% being a relative sizing, change the size of the cards base on the parent size, which is not specified, thus making size goes crazy. Again, not sure why, but that's what causing such problem.

    About the button, when you want to push something to as far as it can go, you can just give margin-(direction): auto. For example, if you want to push the button to the bottom of the card, you can either give to the p tag margin-bottom: auto or to the button margin-top: auto. Got it?

    I think I made things a little bit confusing, so if you need further explanation, just tell me and I'll try to explain better 😅

    Marked as helpful
  • Ricardo Magalhães•180
    @AmodeusR

    It seems you got bipolar with the mobile menu, it opens from top to bottom and suddenly it becomes a box xD And a tip I could give you is to give a smaller max-width to the "reasons you should choose Easybank" section, the text of the items there get too wide at about 400px screen width.

    Besides that? Oof, I can't imagine how hard it were to make this challenge, I already got fearsome just by imagining the media queries (⊙_⊙;) Great job 👌

    Marked as helpful
  • Ricardo Magalhães•180
    @AmodeusR

    @erelita Sorry for the late replay, I would need to see it more in-depth to give you a decent answer, but a quick fix would give a max-width to the main div, though it would end up making the SVGs not touch the sides of the viewport.

    It might be necessary to review/change the approach to make it work the way it is supposed in every viewport size, but I'm not sure...

  • Ricardo Magalhães•180
    @AmodeusR

    The card is pretty big, indeed xD But you know, for someone studying for a month? You did a great job putting all that together! I have some pieces of advice for you:

    • Don't use percentages on paddings and margins. You don't want the boundaries of your content and elements changing accordingly to the user screen's width arbitrarily, only when it needs to.
    • At the beginning of your css files, always give to all elements the content-box: border-box property. You don't need to learn right now what it means, but it'll save you from a lot of headaches, now and in the future. To give this property to every css element, just use the * selector.
    • Work on your Github readme! Documentation is important and helps others understand the process you've been through. Do not underestimate it just because it doesn't involve coding. It's easy to find people who know how to put things together and make it ~kinda~ work, but not so many who documents its steps. Futhermore, the more you dive deep into the programming world, more you'll see how documentation is important.

    This video may help you quite a lot! Kevin Powell is a really great and talented teacher, check it out :) https://www.youtube.com/watch?v=JnTPd9G6hoY

    Marked as helpful
View more comments