Submitted
I made the cards grow and shrink respecting their aspect-ratio
using grid
. I have to mention that two separated fields for date just makes things harder!
@jvmdo
Submitted
I made the cards grow and shrink respecting their aspect-ratio
using grid
. I have to mention that two separated fields for date just makes things harder!
Submitted
My HTML for the notification
was bad designed. I realized it too late. That's why the chess image is not positioned correctly on narrow devices ☹
Submitted
Submitted
Submitted
I've applied max-height: 0
and visibility: hidden
then max-height: 10rem
and visibility: visible
. This way the box is displayed from top to bottom on transition.
How could I make it to display it from bottom to top using this same hidden/visible technique?
Submitted
Is there some technique to better manipulate images other than just set their width?
Submitted
Submitted
Submitted
The social icons hover color was not provided or am I missing something?
Submitted
I've applied an transition
in order to animate the open/close side menu, but it only works on opening. I'm learning more about CSS transitions to overcome these problems.
Submitted
Submitted
Which techniques can I use to do this computer image overflows the page? I made it using float with negative margin.
Submitted
The <meter>
element?
I've tried to use the <meter>>
element because it seems to be the correct way to create a progress bar. But, I could not apply styles to it as explained in this CSS Tricks article.
Submitted
Submitted
Submitted
Submitted
The hardest challenge I've submitted so far. All the others challenges I took a mobile-first approach. This time, I tried to start by the desktop layout then go down to narrow screens because the desktop one is more complex in this case.
How to do the best choice between desktop-first and mobile-first?
Submitted
Submitted
It seems border-box
is not working properly, at least for my 3 buttons. When I hover over the buttons, I set to display 2px all sides borders on them. As it happens, the whole container's height increases by 12px, which is not the expected behavior for a border-box element, right?
Submitted
Context 1
I could not get to the same background as the design using background
property by default. Instead, I made a workaround using transform: translate()
.
Question 1
Is this approach OK or there is better one?
Context 2
My approach worked, however, with a side effect: the bottom image overflows. I set overflow: clip
(tried hidden
also) then the user can't neither see nor scroll over the unwanted area but the Edge Dev Tools remains displaying overflow area also the scroll bars.
Question 2
Is it just an Edge bug or the expected behavior?
Submitted
Submitted
I struggled in the desktop version because of the image sizing within the flexbox. I feel there is a better way to do it but I didn't found a good learning resource.
Submitted
Originally, my media query condition was min-width: 76.8rem
. I've set html font-size: 10px
, so I thought 76.8rem
would be equal to 768px
. But, instead, it resolves to 1228.8px (76.8 * 16px)
Is it supposed to behavior like this or am I doing something wrong?