Skip to content
OverviewSolutions
7
Comments
10
Erik Samuel Medeiros
@samuerikcoder

All comments

  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

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

    0
  • Ed•720
    @EdwinSchSubmitted over 1 year ago

    Hi all! Nothing special really... working on my React course and found this little project to be good practice for the useRef hook. I've taken some creative liberty on the original design just for funsies.

    Base Apparel with React + CSS

    2
    Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    OMG IT'S SO BEAUTIFUL

    1
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

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

    1
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    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
    0
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    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
    0
  • Pascal•40
    @CodingEuleSubmitted over 1 year ago

    It was difficult for me to work with Grid so tried Flex it worked better was still hard to do it for me

    What do you think? What could I do better?

    ColumnCard HTML CSS Flex

    1
    Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    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
    1
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    You can add this:

    body {
min-height: 100dvh;
}

.container {
height: 100%;
/* position: relative */
}

    Remove the position relative of the .container.

    0
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    You can add a 100% height in the image if you like.

    0
  • Mfrekemfon•120
    @MfrekeeSubmitted over 1 year ago

    Hey y'all, came back for the summer holiday a few days ago, and i thought i'd learn more things on front end (push myself from being a designer to being a developer) and still practice the ones I already know (that second part's easier now with front-end mentor). Anyway, you'd notice that what I did isn't exactly what's on the desktop design pic (thought I'd play around the color a bit🤷), and I've actully got a question, which is that, when i share the live site link to my phone, everything in the QR Code Component shifts to the right (except that text that's above it though), and the white background doesn't cover the code nor the picture anymore, it's not even there again. So I ask, is this how it's supposed to be on mobiles?🤔 Probably because it wasn't created as a mobile site or something?🤷‍♂️

    QR code component desktop design

    4
    Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    Hello friend, I took a look at your site and did some testing while inspecting the element in the browser. Whenever you develop something on the frontend try to start with the mobile version, we call it mobile first. One of the things I did to improve its design was

    body  { 
display: grid; 
place-content: center; 
min-height: 100dvh
}

    Create an element that will help you create the text part, a div with the 'text' class or whatever you think is best.

    This video on YouTube saved me when I wanted to start making the challennges on this site: https://youtu.be/B2WL6KkqhLQ

    I haven't started this challenge yet, if it wouldn't give you better support on the issues, but feel free to see my other solutions.

    Marked as helpful
    2
  • Erik Samuel Medeiros•180
    @samuerikcoderPosted over 1 year ago

    Good solution my brother! I loved your css. Try to make the site responsive with the grid container or flex box in a media query. Also try to "clean" Javascript a bit by reducing the amount of 'ifs'. You can create a variable that contains all the inputs and then iterate over them by calling the validate function only once in the code.

    0