I'm an 18 year old guy from Venezuela who likes languages (yes, those that we, individuals, speak) I also like the Final Fantasy saga, it's my favorite! I discovered this world of web development by accident and I ended up liking it! So if we can get along it would be great!
I’m currently learning...JavaScript!
Latest solutions
qr card component - BEM
#bemSubmitted 9 months agoif someone could let me know how can I improve my code or let me know if it looks clean
responsive rest countries api with color theme switcher (vanilla JS)
#fetchSubmitted over 2 years ago
Latest comments
- @davidghignone@Pazispeace
looks nice
- @a-dri-an-S@Pazispeace
hi!, nice solution =)
I have some feedback that could be of help
on your product-btn class instead of using a fixed height, try using padding. In this case I tried with 1 rem and seems fine (100 px is way too much hehe)
and that´s all! everything seems great
- @akennich@Pazispeace
Hi there aKennich! Nice solution :). I have some feedback that might help.
-
First of all I would recommend you to use rem unit instead of em unit (you will have some troubles using em unit if you don´t know when to use it) rem vs em Units in CSS
-
Set a max width to the card so the card does´t get bigger and bigger, I tried with 21 rem and works fine! Avoid using % in this case since it will always take the 40 % of its container, and its container is the body (which does not have a fixed width)
.card { max-width: 21rem; background-color: hsl(216, 50%, 16%); border-radius: 1rem; font-family: 'Outfit', sans-serif; padding: 1rem; }
- I think you forgot to add to the span of "Jules Wyvern" a white color hehe
span.cyan{ color:hsl(0, 0%, 100%); }
Change the em unit for rem so you won´t have troubles with sizes : - )
happy coding, wish you a nice day! :D
-
- @joexyjay@Pazispeace
Hi there Joseph! Nice solution :D I have some tips and adjustments that might help!
- In your overlay div which is inside the images-section div. I would recommend you to apply a border-radius with the value of inherit to it (the overlay). If you look carefully the border bottom right and border top right are not rounded, that is because border-radius is not an inheritable property. For that you have to specify it in the class:
.overlay { height: 100%; background-color: hsl(278, 75%, 33%); opacity: 0.5; border-radius: inherit; //here!!!!! }
- I think 1500px for your image is way too much hehe, try it with 900 px or les (or a bit more) instead:
@media (min-width: 800px) .images-section { background-image: url(images/image-header-desktop.jpg); width: 900px; //here!!!!! background-size: cover; background-position: initial; height: auto; border-top-left-radius: 0; border-bottom-right-radius: 10px;}
- When shrinking the viewport, your text-section div overflows, that is because of the padding you added to it (top and bottom). Instead you can try adding display:flex with its flex direction in column, and justify-content:center; (this defines the alignment along the main axis. The main axis is Y (vertical) in this case because the flex direction is column). Additionally I added the flex-basis property this defines the default size of an element before the remaining space is distributed... Worth knowing that Flex-basis matches width when the container has flex-direction: row and a defined value other than auto. If the container had flex-direction: column, flex basis would match the height of the component, as long as its value is not auto.
If the container has flex-direction: row, the value of the flex-basis property overrides the width property. The same with flex-direction column overriding the height property
@media (min-width: 800px) .text-section { font-size: 20px; display: flex; //here!!!!! padding: 0 35px; flex-direction: column; //here!!!!! justify-content: center; //here!!!!! flex-basis: 80%; //here!!!!! }
-Try to not use px units since absolute units ( px , in , mm , cm , pt , and pc ) are as bad for accessibility and responsive design as using tables for layout
Articles I think might be helpful:
A complete guide to css Flexbox
CSS Units For a Responsive Design
PX, EM, or REM? Examining Media Query Units in 2021
Happy Coding, I wish you a happy day! : )
Marked as helpful - @Skoro11@Pazispeace
for your first question, I recommend you reading https://codeguide.co/ !, I think it may help :) happy coding!
Marked as helpful - @osmanhakim@Pazispeace
you uploaded your solution in the wrong challenge hehe. Upload the solution to the corresponding challenge