Skip to content
OverviewSolutions
2
Comments
4
Josip Perić
@Pekinezer

All comments

  • Stephen-Gray99•20
    @Stephen-Gray99Submitted almost 2 years ago

    FEEDBACK WELCOME!

    I decided against mobile view as I am only 1 month into my journey and want to feel comfortable using HTML/CSS to make these sites before I start messing with mobile view as I want to get a sound understanding of one before the other.

    I also learned how to use basic Transition/Transform on this project to try and give it a little more life!

    Overall I am happy with the outcome and thought I would struggle a lot more than I did but within just over an hour I managed to get it as close as I deem a decent portrayal. Especially as I did not have access to Figma files to get a better understanding of the design behind it!

    Four Card Feature Grid

    2
    Josip Perić•40
    @PekinezerPosted almost 2 years ago

    As far as i can see everything looks fine ok there are some small things like using font size for the entire page then using H1 instead of h4 and p but that's fine, as far as the mobile version goes you approach may be better than mine but i will give you just an idea for mobile version, the way i did it is with flex box one in the main that has flex direction row and put elements 2 and 3 in a div so they go in the middle , giving the div with elements display flex and flex direction column adjusting the positions with margin and padding... ( I know it's not very responsive ) then when it comes to mobile just switching the flex direction of the main element from row to column and you are mostly done. Using grid here in designing the full page is great but can be anoying when trying to figure out mobile version that's why I am giving the idea with flex box.

    Also I can see that your lines on the top of the elements corners are curved and in the design i don't think they are, you can fix that with not using border-top instead puting a div with few pixels height width 100% position absolute top 0 left 0 and the background color, since it has position absolute it won't disrupt the position of other elements, oh yeah and give the parent element that has the div overflow hidden. Hope it helps.

    0
  • fischer-c187•200
    @fischer-c187Submitted almost 2 years ago

    @vcarames Hello, do you have any advice about my code? I would like to notify you because you helped me a lot with your advice on my last project. I applied all your advice on this project.

    four-card-feature-section

    1
    Josip Perić•40
    @PekinezerPosted almost 2 years ago

    As far as i can see only thing is the colored border at the top, on your project it has a curve and not on the design provided you can either make that by making a before element and then giving it a class makig its height few pixels width 100% z index 1 display absolute left 0 top 0 and giving the div from which you are makeing the before element owerflow hidden, or justa making a div with background color inside the element as the position absolute will move it from normal flow of the page and it wont dissrupt the rest of the content. Hope it helps.

    0
  • JackoWill•40
    @JackoWillSubmitted almost 2 years ago

    The hardest part I found building this project was whether I should be using grid or flexbox. I ended up using Grid to just position the layout in the center and flexbox for the card container.

    Wasn't sure if it was the right way to use grid and flexbox. As i'm still learning and this is my first ever project.

    I want to know if what I did was correct or if I should of tackled it in a more efficient way.

    QR code component

    2
    Josip Perić•40
    @PekinezerPosted almost 2 years ago

    Also one more thing I notices is your github repository, I am not sure what the practice is on Frontend Mentor but usually developers don't push the entire root folder to github, feel free to make use of .gitignore file to mark the folders and files you dont want to be pushed and i dont think you need to push the .gitignore file to github as it is just a list of files and folders... Anytime mate.

    Marked as helpful
    0
  • JackoWill•40
    @JackoWillSubmitted almost 2 years ago

    The hardest part I found building this project was whether I should be using grid or flexbox. I ended up using Grid to just position the layout in the center and flexbox for the card container.

    Wasn't sure if it was the right way to use grid and flexbox. As i'm still learning and this is my first ever project.

    I want to know if what I did was correct or if I should of tackled it in a more efficient way.

    QR code component

    2
    Josip Perić•40
    @PekinezerPosted almost 2 years ago

    The solution you have done is not bad as far as I can see, although in this perticular case it might be easier to give the body flex then justify-content center and align items center, and if you so desire give the element itself again display flex like you did here, and i think you don't need the width 100% on body because it should be by default the entire screen width... Height you do need. For more complex design's use grid where you need to align item's on the x axis and the y axis at the same time and when you have more elements but in case of centering a single element flex should be an approach that saves you time. Hope it helps.

    Marked as helpful
    0