Skip to content
OverviewSolutions
7
Comments
10
Ricardo Magalhães
@AmodeusR

All comments

  • Wellington Damasio•210
    @wellington-damasioSubmitted almost 2 years ago

    I couldn't find a way to add those circles the corners of the screen without writing more the 20 media queries.

    So I removed them and I'm hoping someone help me with this problem 😂

    Profile Card Component with TailwindCSS

    1
    Ricardo Magalhães•180
    @AmodeusRPosted almost 2 years ago

    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.

    0
  • zabooz•270
    @zaboozSubmitted about 2 years ago

    is there a cleaner way to adjust the color of the button text, while hovering over, to match the background color?

    3 column

    1
    Ricardo Magalhães•180
    @AmodeusRPosted about 2 years ago

    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.

    1
  • Kate Dames•250
    @funficientSubmitted about 2 years ago

    Hey mentors,

    When my screen size is between 1400px and 1420px the cards are different sizes and I can't get them to be the same size (sized to the largest height). How can I fix this?

    Also, is there a better way to handle the button being bottom aligned? I tried a few things, thinking a align-contents: bottom should work but it doesn't. Why?

    Many thanks! Kate

    3 Column Preview

    2
    Ricardo Magalhães•180
    @AmodeusRPosted about 2 years ago

    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
    1
  • Ricardo Magalhães•180
    @AmodeusRPosted over 2 years ago

    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
    1
  • Ricardo Magalhães•180
    @AmodeusRPosted almost 3 years ago

    @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...

    0
  • drunken_neoguri•290
    @DrunkenNeoguriSubmitted almost 3 years ago

    Nice to meet you! That's my first challenge in Frontend Mentor.

    I tried to hard that making site, but I think too big card size in site^^; I'm newbie and studied to html/css for 1 month, so my code will be a lot of awkward things. If you think better way in the code I wrote, please give me feedback! I will study hard by referring to it. :D

    See ya!

    1st challenge - NFT preview card

    1
    Ricardo Magalhães•180
    @AmodeusRPosted almost 3 years ago

    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
    1
  • Ricardo Magalhães•180
    @AmodeusRPosted almost 3 years ago

    It seems your layout breaks when the viewport width gets too wide. Have you tried making a container for the content to fix it?

    0
  • Ricardo Magalhães•180
    @AmodeusRPosted almost 3 years ago

    You need to work on your mobile version! It's broken.

    0
  • Ricardo Magalhães•180
    @AmodeusRPosted almost 3 years ago

    I think you published the wrong challenge 🤔

    0
  • Ricardo Magalhães•180
    @AmodeusRPosted about 3 years ago

    Read the archives from Frontend Mentor and edit your readme.md archive, you didn't write it. You can follow the README-template they provide to know what you can write.

    Marked as helpful
    1