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 😂
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 😂
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.
is there a cleaner way to adjust the color of the button text, while hovering over, to match the background color?
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.
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
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 😅
The header part was the hardest because I was confused about putting it in the container or not and using the positioning or not, whatever was a great challenge.
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 👌
I would like to know how I can improve the responsiveness. And if you notice anything else I can improve on, please let me know. Any feedback is greatly appreciated. Thank you! :)
@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...
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!
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:
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
I would like to know how I can improve the responsiveness. And if you notice anything else I can improve on, please let me know. Any feedback is greatly appreciated. Thank you! :)
It seems your layout breaks when the viewport width gets too wide. Have you tried making a container for the content to fix it?
You need to work on your mobile version! It's broken.
Hello everyone! this is very easy task so please give your suggestion for my coding skill and how to improve! thank you.
I would appreciate any feedback, thank you in advance.
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.