Skip to content
OverviewSolutions
7
Comments
10

Erik Samuel Medeiros

@samuerikcoderBrazil200 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

  • Erik Samuel Medeiros•200
    @samuerikcoder

    Add in the body: min-heigth: 100dvh and add your background-image.

  • Erik Samuel Medeiros•200
    @samuerikcoder

    OMG IT'S SO BEAUTIFUL

  • Erik Samuel Medeiros•200
    @samuerikcoder

    This video will help you https://youtu.be/B2WL6KkqhLQ

    Marked as helpful
  • Erik Samuel Medeiros•200
    @samuerikcoder

    Apply this changes in the body:

    body {
display: grid;
place-content: center;
font-size: 15px;
font-family: 'Red Hat Display', sans-serif;
background: url(images/pattern-background-desktop.svg);
background-size: contain;
background-repeat: no-repeat;
min-height: 100dvh;
background-color: hsl(225, 100%, 94%);

    Now research the use of media queries to improve design on mobile. You will need to add unique modifications to it for the background of the body, I believe it will be very similar to the rules you had put. On the desktop add more padding to your content until you think it's similar to the original.

    Marked as helpful
  • Erik Samuel Medeiros•200
    @samuerikcoder

    Beatiful solution, but in your font-weight variables you added "px" at the end, removing them to take effect in the code. And in the screen widths of the iPad type the image is kind of squeezed, try to improve this part of the responsiveness, but I found the responsiveness of this challenge very complicated even lol.

    Marked as helpful
  • Erik Samuel Medeiros•200
    @samuerikcoder

    Hello my friend, I took a look here at your solution and I will tell you what will need to be added. You used the absolute position more than you should. It was enough to have added a flex display in the body. Remove the Overflow hidden on mobile device media querie. I think that the mobilefirst is more easy.

    .container {
overflow: visible;
}

    To see how to use Grid in this challenge, see my solution: https://www.frontendmentor.io/solutions/3column-preview-card-component-Hubl-E16PC

    But basically you would use the Grid display on mobile to leave all the items stacked and on the desktop you would use the grid-template-columns to put them side by side.

    body {
display: grid;
place-content: center;
}

.container {
display: grid;
}

@media(min-width: 600px) {
.container {
grid-template-columns: 1fr 1fr 1fr;
/* 1 space for each*/
}
}
    Marked as helpful
View more comments