Skip to content
OverviewSolutions
17
Comments
3
efim
@efim

All comments

  • efim•390
    @efimSubmitted over 1 year ago

    Yes, I've not completed things fully:

    1. want to try free api - https://ip-api.com/docs/api:json it shouldn't have "500 requests" limit, and my sample site would be available for longer
    2. use grid in the info panel (to make it prettier on middle resolutions)
    3. write good readme

    And add cool notes to this submittion. But! It works and I really want to cross it off my mind for a moment. ScalaJS, Laminar and integration with Leaflet maps through automatically binding that were automatically generated from Typescript interface by ScalablyTyped project, yay!

    ScalaJS & Laminar, with Leaflet via ScalablyTyped. Vite, TailwindCSS

    1
    efim•390
    @efimPosted over 1 year ago

    I don't understant why the map is not really centered. It seems that the map box equals to what is actually shown, so i'm not sure why after "centering" the pin is not in the center, but that's allright for now

    0
  • Kenny Burger•50
    @IcxlessSubmitted over 1 year ago

    🔴 Problems

    • Position and spacing
    • In the mobile view, the text has moved together a bit, what could be the reason or how can this be fixed?

    Please give me feedback on better ways to do this or if I'm doing anything wrong. Thank you in advance! 🙂

    Solution using HTML and CSS with Flex and Grid

    1
    efim•390
    @efimPosted over 1 year ago

    Hi! I'm not a senior in frontend dev, but wanted to try to figure out your question: "In the mobile view, the text has moved together a bit, what could be the reason or how can this be fixed?"

    What I did is opened your website in Firefox, entered mobile view with "Ctrl + Shift + M" (or Menu -> More Tools -> Mobile Design Mode) and then opened dev tools with F12.

    The "context menu" (right click) on the text and then "inspect element" highlight that element in the dom in the menu, and also allow us to see sized of "body \ padding \ margin"

    I'm putting the screenshots in my repo and will paste links:

    1. this is me inspecting the element in question: screenshot 1
      you can see that putting cursor at the blue inner rectangle (1) - the body gets highlighted at the page (2), but no padding or margin is detected
    2. then I check elements higher in the hierarchy, and finding this one screenshot 2
      setting cursor to (1) purple "padding" place - highlights the area of your webpage that padding takes (2) so, this is the element that results in text getting smushed
    3. then i can also temporarily change the style right in the browser dev tools: screenshot 3
      setting left and right to 1rem removes this smushing

    You'll probably want to have media queries for mobile size that set different paddings for the element. and maybe even not using paddings to make blue background take whole width, but just make it's width 100% or something. Here unfortunately I can't give specific advice, because I've started almost immediately with TailwindCSS and it's a bit different from css

    Hope this helps!

    Marked as helpful
    1
  • efim•390
    @efimPosted over 1 year ago

    Hi! Two days is as good as any other duration - we all have different schedules with work, other studies and responsibilities. As long as you learn something new and feel good about the exercise - my vote is that you're doing well!

    There's great article, by creator of frontendmentor - https://medium.com/frontend-mentor/how-to-get-the-most-out-of-frontend-mentor-bdd6fdc25cb8

    It says the same thing: Don’t worry about time The main point here is not to compare yourself to others. Instead, measure yourself and try to make improvements wherever you can. That will be a far better use of your time.

    1