Skip to content
OverviewSolutions
21
Comments
19

x-147

@x-147310 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • x-147•310
    @x-147

    looks great!

    some quick feedback:

    • social icons are missing, you can download from font awesome. also have to think about background (wont' spoil it for you). no js required for this bit.
    • html validation prompts to enter correct email address. i disabled this by adding "novalidate" to form element since challenge requires manual validation.
    • manual validation requires js
    • highly recommend using grid or flex for layout, makes building pages lot simpler (minimises use of padding, margins etc)
  • x-147•310
    @x-147
    What specific areas of your project would you like help with?

    curious to know how people design mobile responsive view. do you rewrite everything or change the html font size which changes rem values in mobile view or other techniques. what measurements do you set for rem's, for example typography only and not layouts?

    intro-component-with-signup-form-master

    1
    x-147•310
    @x-147

    so some design decisions, not responsive at every breakpoint, just at mobile. other breakpoints are scrollable.

    if fields are missing i see the form increases in size when displaying error message. curious to know what folks think about this / prefer. i used positioning for error messages so the form size remains the same (not jumpy). also this felt a bit easier to do, maybe i was being lazy.

    enjoyed the attention to detail that was required when working with input boxes (outline-color for example, on click event, on focus etc)

  • x-147•310
    @x-147

    not responsive at multiple breakpoints (just mobile), instead added horizontal scrolling, just a different design choice.

    used validator js script for email validation

    i am having to almost entirely redesign mobile view, the layout snaps in most times no problem (with flex or grid), but everything else needs new values, how do people do this

    i like the result from designing the input box and submit button, pretty cool

  • x-147•310
    @x-147

    any one know why my deploy's always look scaled down in size to how it appears when i run locally?

    i thought it was because i had font-size in my body element instead of html root element. this didn't fix the issue. i am using rem's where appropriate.

    thanks

  • ysagohh•260
    @ysagohh
    What challenges did you encounter, and how did you overcome them?

    The mobile version looked good when resizing the screen on my laptop, but it broke when checking from my phone. The image was stretched over the entire container and the text became an overlay on the image. What I did was to put this code in mobile view:

    .wrapper {
   height: max(auto, 100vh);
}

    It was initially set to height: 100vh, so it was resizing to the viewport height of the phone instead of creating an overflow.

    What specific areas of your project would you like help with?

    Is there a better way to align the container at the center of the screen while the footer is at the bottom? I'm using Grid to do it in this project, and I have used Flexbox combined with margin-top: auto in the past.

    Responsive Preview Card using CSS Grid

    1
    x-147•310
    @x-147

    "Is there a better way to align the container at the center of the screen while the footer is at the bottom? I'm using Grid to do it in this project, and I have used Flexbox combined with margin-top: auto in the past."

    hmm, not sure what you mean. another way to center .wrapper is with display: flex, flex-direction: column, justify-content: center, align-items: center, min-height: 100vh, quite similar to what you have now.

  • Leslie Bagalho•90
    @lesliebagalho
    What challenges did you encounter, and how did you overcome them?

    O hover da imagem com outra imagem e fundo. Tive que copiar de outro...

    What specific areas of your project would you like help with?

    O hover da imagem com outra imagem e fundo. Tive que copiar de outro...

    NFT Preview Card Component

    1
    x-147•310
    @x-147

    "O hover da imagem com outra imagem e fundo. Tive que copiar de outro..."

    não é grande coisa, é assim que você aprende

    one small improvement you can make, you can see when you hover the pseudo element appears larger than the image (at the bottom). this has to do with white spacing created by the image html element, since the image is an inline element it has such properties.

    to fix this, simply add display: block to .img-btm

    .img-btm {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  display: block;
}
    Marked as helpful
View more comments