Skip to content
Submitted over 4 years ago

Mobile first, flexbox + js

Robert McGovern•1,075
@tarasis
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there a way to say use X width in small displays, and Y width on larger displays? I tried various combinations of width: clamp/min/max/min(max())/max(min()) in an effort to avoid doing it in media queries but couldn't figure it out (using width: 90vw for < 600px, 75vw for 600-1050px and 50vw above that).

—

Why does my input field for email turn blue when you start to enter something? AFAIK I don’t set that.

--

Slightly irked that despite having the desktop image match before submission, they don't here. I assume its because I used margin-top: auto for the footer section, rather than specifying a specific size.

—

Is there a better way to handle the hiding / showing of the error message? The input field, the error message and notify button are in a flex column (mobile) or row (desktop). The error message div is set to take up zero space so it doesn’t affect positioning of the other two items, and when in a row I use flex ordering to put the error message first in the row.

Then when an error occurs I apply a css class that moves the message’’s location down. (And when in column, I push the notify button down like the design shows). It works, but feels hacky.

Community feedback

  • Christopher Till•1,070
    @chri55Posted over 4 years ago

    Hey Robert, I saw your updated question about the error message placement. In looking at your code I saw what you meant by transforming the button's location when the error message is shown.

    I think your solution fine for desktop, where space is ample but on mobile transform could become weird at any point, or on any device/browser. So I replicated a quick example of your form on CodePen and modified some things so that no transform or opacity is necessary on mobile. Take a look and let me know what you think, I left some more detailed comments about what I did in there.

    1
    Robert McGovern•1,075
    @tarasisPosted over 4 years ago

    @chri55 fabulous! Thank you Christopher. Exactly the sort of guidance I wanted/needed.

    0
  • Christopher Till•1,070
    @chri55Posted over 4 years ago

    Hey Robert, well done. A couple answers to hopefully point you in the right direction:

    1. I think I read your question right, you said you tried to use a media query with vw in place of px. The vw and vh units (like rem and em) are relative units, and they are relative to screen size rather than absolute, so it's always best to use an absolutely defined unit like px to ensure the media queries work.

    2. I believe some browsers set the outline property by default when an input field is clicked on, try adding a state rule for :focus on the text box and give it outline: none and see if it works. However this is not recommended in production as visual impaired users need that outline to see what they have selected.

    Great work, hopefully I answered some of your questions, and good job matching the design!

    1
    Robert McGovern•1,075
    @tarasisPosted over 4 years ago

    Thank you Christopher, your comments are appreciated. Particularly the note about outline:none. The is useful to know!

    Regarding question 1. It’s more what I wanted to tell CSS was to restrict the size between 90vw (at mobile sizes) and 50vw (desktop sizes), and have it handle the scaling in between.

    I understand it is possible to do with font sizing, and I hoped I could do something similar for width. https://css-tricks.com/how-do-you-do-max-font-size-in-css/

    You made me realise I forgot to ask a question 😆 but I don’t want to take up any more of your time.

    Thank you, and have a lovely weekend

    0
    Christopher Till•1,070
    @chri55Posted over 4 years ago

    @tarasis Ah, I see. I'm not sure I know enough about media queries to do that kind of min-maxing yet.

    But if you have other questions please feel free to ask! I'm happy to help any time :)

    1
    Robert McGovern•1,075
    @tarasisPosted over 4 years ago

    @chri55 much appreciated! If you end up bored at some point I updated the Questions for Community with an extra question.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord