Skip to content
OverviewSolutions
25
Comments
4

Anna P. M.

@annapmarinSpain, Mallorca390 points

Junior Front-End Developer

I’m currently learning...

React & JS

Latest solutions

View more solutions

Latest comments

  • Anna P. M.•390
    @annapmarin

    Hi! First of all, congratulations for your work

    Here are some tips:

    • Notice that the background is not a solid color, but a linear gradient background: linear-gradient(color1, color2) (the gradient color codes are in the style-guide.md).
    • Also I would add a min-width to your main.container, so that the img.box does not change position.
    • The font-weight for the title is bolder in the design, and notice that the questions should have a bold font-weight when active.

    Hope this can help :)

  • Anna P. M.•390
    @annapmarin

    Hi! First of all congratulations for your work

    Here are some tips:

    • About the media query ( @media only screen and (max-width: 375px) maybe you can add a larger max-width because mobile screens do not all have a standard size of 375px. Maybe I would set the rule at 450 or 500px. And then I would write another one from 375 or 400px to add the background for the mobile version).

    • Also, the background-desktop should be changed to background-mobile in the media query.

    • For the div.container you can try this:

    .content {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap; /* This means that the flex, 
when it no longer fits on the screen, becomes a column, 
i.e. the content is placed one below the other. */
    align-items: center;
    gap: 30px;  /* This adds a gap between the two divs */
    margin-top: 80px;
}
    • For the .device img I would make it a little smaller so that the flex-row fits on a wider variety of screens.
    Marked as helpful
  • Anna P. M.•390
    @annapmarin

    Good job! Maybe you can erase the text-align: justify to fit the original design. Also, regarding the image, you can heighten the image: height: 455px; to fit in better, or you can try adding new properties to the div you named as "img_container".

    Also (but this is less important) you can add more right margin to the <h1> and more line-height and margin-right to the product description <p> to fit more the original design.

    Marked as helpful
  • Anna P. M.•390
    @annapmarin

    Good job!

    Perhaps you could try to add a new functionality in JS that causes the other tabs to close (i.e. return to the inactive class when click another tab) via an "if", with "remove" and "add".