Submitted about 3 years ago

Grid Flexbox

Rishad• 115

@Noob-Coder-You

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

i had a lot of problems making them any advice would be helpful btw this is my second challene

Community feedback

Ahmed Faisal• 5,095

@afrussel

Posted about 3 years ago

Nice try. Yes you are right. There are lots of mistake here. Use some padding after image section. Also add bg color with image. For that use below code body{ background-color: var(--pale-blue); background-image: url("images/pattern-background-desktop.svg"); background-repeat: no-repeat; background-size: 100% 50%; display: -ms-grid; display: grid; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; }

Rishad• 115

@Noob-Coder-You

Posted about 3 years ago

@afrussel Thank you bro for your advice it means a lot actually i dont even know all the properties btw can i get your insta(or any) to contact you if you dont mind please bro

Hafizan Adli• 1,190

@hafizanadli

Posted about 3 years ago

Hello here are my suggestions:

use auto-indentation feature, to make your code more clean and easy to read
Set body min-height with 100vh. And you can easily centering the parent class with flex.
Don't use redundant selector (e.g. you select body twice)

Keep learning and improving!

Rishad• 115

@Noob-Coder-You

Posted about 3 years ago

@hafizanadli Thanks man its appriciated like you said i have added min-height:100v; and selected the body once and for auto-indentation and couldnt find it is there anything else you want to point out it would be appriciated.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord