Skip to content
OverviewSolutions
0
Comments
3
Prabhjot Kaur
@prabhjotkaur10

All comments

  • Luis Rangel•60
    @Luis-ran1Submitted over 3 years ago

    Here is my solution, I changed a little bit the design because I really don't now how to put te buttom in the top of the form in the tablet and desktop resolution, and well, I know that maybe it isn't the best, but I made it by myself.

    Intro component with sign-up form Practice building.

    1
    Prabhjot Kaur•15
    @prabhjotkaur10Posted over 3 years ago

    Hi Luis, nice attempt. I saw your code, and I have some suggestions to fix this UI.

    • First, I saw you have set the background image for body tag, which is alright.
    • Then, you have a main-container, which is flex container, so you can add some more properties to it like "justify-content: center", add some gap between the blocks, with the help of "gap" attribute and add "align-content: center"
    • Add width (like 40% or 50%) to the "main-section" and remove the display, margin properties, its not required here
    • Add width to "section-form" as well, like 50%.
    • You can add a min-width to "section-form", so that it takes up some space.
    • Also, add some style of input fields, as they look basic.
    • Add some padding to the form.
    • The Green Button "Claim your free trial", needs to be fixed like setting font size, text transform.

    For fixing tablet view,

    • You can add media queries, and remove the "display: flex" property from main-container. and add full width (100%) to the "main-section" and "section-form" container.

    This will fix most of the UI.

    Thanks.

    0
  • Vinay•125
    @foolhardy21Submitted over 3 years ago

    I have made the changes mentioned below in comments. Feel free to critique further. Thanks.

    HTML, CSS

    4
    Prabhjot Kaur•15
    @prabhjotkaur10Posted over 3 years ago

    Hi, Nice attempt. The image on right side, cuts, since its element does not have a background-size. I would suggest you to replace this piece of code in css. Also you can fix it in mobile view.

    .card-image {
    width: 600px;
    height: 100%;
    background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-desktop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-position: center top;
}

@media (max-width: 500px).card-image {
    width: 100%;
    background-image: linear-gradient(hsla(277, 64%, 61%,.50),hsl(277, 64%, 61%,.50)), url(./images/image-header-mobile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

This will fix the skewed image issue in mobile view.
    1
  • Prabhjot Kaur•15
    @prabhjotkaur10Posted over 3 years ago

    Hi, To show the face to the model in tab view, i.e 768px and views less than this, you can replace the following code:

    @media (max-width: 860px) .right-col { grid-area: image; background: url(./images/hero-mobile.jpg) no-repeat center top/cover; width: 100%; height: 350px; margin: 30px 0; } }

    This will fix rendering of model in tablet view.

    0