All solutions

Added some functionality for mobile devices to hide/show the IP information field, since it blocks most of the map.

questions:

1. on the IP information card, I tried using flexbox wrap to achieve the row (desktop) to column (mobile) response ------ but I couldnt figure out a way to avoid the ugly/disproportionate 'three cards on top (ip, location, timezone)- one card below (isp)' in the screen sizes transition (around tablet size)... Is there a way to make items wrap 'by two' to avoid that?

2. any tips for real big screens? I'm giving the body a max-width and positioning in the middle with margin: 0 auto; but trying to figure out how the site looks on a big big screen is much harder than checking for mobile screens... I can't say if the text and elements are looking incredibly small for real or its just the fact that I can only view a zoomed-out version of a bigger screen in my 1440...

any thoughts?

thanks,

Hi developers! I made some modifications to this one (added some animations and changed the mock-up text). It's not pixel perfect.

I'm trying to use less media queries and try to achieve the responsiveness with Flex, still have to figure out things (like the footer which uses Grid). I also attempted to make it look good in several sizes (instead of just looking good on 375 and 1400 widths only). Tried it on my tablet and mobile.

Learned that I can replace localhost:portnumber with hostcomputerIP:portnumber and access the project via other devices connected to the same wifi network to test it live... which might be obvious for many of you but was so good to know!

Let me know your thoughts.

The most challenging part was getting the (!) error icon display and behaviour right.

I used it as a background image in the (input), but the positioning was tricky, since (button) is positioned at the end of (input) it completely covers the (!) error icon...and using padding-right does not affect a background image. I settled for a 'calc(100% - 4.5rem)' but I think on the mobile version gets positioned a little too far to the left for my taste (not in a conservative way....).

Hi, this is my take on the Huddle landing page. I used CSS Flexbox and a mobile-first approach.

Do you think is more convenient using Grid? Any recommendations? Let me know what you think!

I designed the column view/mobile version first and then added a media query 'for viewports bigger than 376px...' do you think this approach is ok?

Any tips to improve this code? Thanks!

Any recommendations and tips are welcome ;)