Skip to content
OverviewSolutions
0
Comments
3
Jason Victor
@Theqwertypusher

All comments

  • Jason Victor•35
    @TheqwertypusherPosted over 3 years ago

    Curious, why did you choose grid for the 'top-section'? Because the header, p, and button are put into its own grid box you get unnecessarily large spaces

    I'd recommend using flex-box for this section and then putting the image into a div as opposed to a section tag. Remember section tags denotes a group of content so the img being in its own section is unnecessary as it relates to the left content.

    The img width should be adjusted to match design, you can use position absolute to put it exactly where you want relative to its parent container (make sure to make the container position relative)

    With a smaller screen adjust the paragraph widths so you don't end up with a really long single line and then 1 or 2 words on the next line

    When the screen is <768px, the footer is unnecessarily long because it's a single column. Use grid or flex-box to break it up

    0
  • Developer3027•15
    @Developer3027Submitted over 3 years ago

    I did not download to kit. This is built off the concept of the images. I used a image off unsplash. It was after I worked it up that I realized you can download the kit, however, I like this concept so this is what I am submitting. Surely I can not be the only one to have made this mistake. I set it up in a aws s3 bucket for review. When this form failed due to the s3 bucket http, I set up in Vercel. Hope you enjoy. Please comment.

    stat card built html and css

    4
    Jason Victor•35
    @TheqwertypusherPosted over 3 years ago

    Well done. And thanks for mentioning the tools you used, I definitely bookmarked them!

    1
  • Jason Victor•35
    @TheqwertypusherPosted over 3 years ago

    It moves because the unhidden class on your error message updates [display: none] to [display: block].

    [Display: none] removes the element from the flow of the page so it does not take up any space whereas [display: block] will occupy space which causes the intro-try-form to lengthen and ultimately your wrapper to adjust for the newly re-sized content.

    You can use positioning to fix this. Make the input [position: relative] and the error message container [position: absolute]

    Marked as helpful
    1