Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
13
Burak CLN
@brkcln

All comments

  • Agastya Rajawat•10
    @Agastya909
    Submitted almost 4 years ago

    Order summary checkout page.

    2
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hey there, thanks for the sharing.. There are many ways for centering,

    • You may wanna look at this link. This might be what you're looking for.
  • Patricia Hurst•80
    @patricia-hurst
    Submitted almost 4 years ago

    3 Column Component with Flexbox & SASS

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hey there, thanks for the sharing your work. Its pretty good. But i can say 2 3 thing about that.

    • its not centered, may wanna look at ..(You can use flexbox for that.)
    • setting fixed "height" and "with" not a good practice can overflow when text too much,
    • for padding and margin may wanna use "em" units, "rem" better for "font-size" good work keep up^^
  • Sebastian•35
    @PulseFiction
    Submitted almost 4 years ago

    Article Preview Component

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, thanks for sharing your work. I can say 2 3 thing about your work..

    • Avoid to set "width and height" most of time you don't need,
    • Don't use "Pixel" for width, height its not a good practice and not responsive, use "em, vh or %" can search it. Padding and margin use "em" for sure..
    • Don't set width on body not a good practice,
    • For font-size you can use "rem" more responsive and new try to avoid "pixel",
    • And its not centered use of "height, left, right" etc.. Keep up ^^
    Marked as helpful
  • Dušan Lukić•1,660
    @dusanlukic404
    Submitted almost 4 years ago

    Responsive Stats preview component card with HTML, CSS.

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, thanks for sharing.. i can say 2 3 thing for your work.

    • Its looking like this on "chrome" https://prnt.sc/1qee9ew, and "opera" https://prnt.sc/1qee9xe lookin like this maybe wanna look at..
    • When i resize the screen its look like this https://prnt.sc/1qeea8c,
    • On tablet its overflowing https://prnt.sc/1qeeap5,
    • avoid to set "height" if u really wanna set height do it on "parent" like main.. keep up^^
    Marked as helpful
  • Sandy Marrone•145
    @sandymarrone
    Submitted almost 4 years ago

    Order Summary responsive Pure CSS

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, Thanks for submitting your project. You did well, 3 - 4 thing i can say..

    • avoid to set "height" not a good practice (most of time),
    • I see unnecessary codes in the codes you wrote. Maybe you wanna look at,
    • For the font size try to use "rem" instead of "em" [watch this] (https://www.youtube.com/watch?v=pautqDqa54I)
    • Can add "main",
    • Can add "container" better experince, good work, keep up :)
    Marked as helpful
  • Tejas Shekar•10
    @TejasShekar
    Submitted almost 4 years ago

    Built using purely HTML and CSS

    2
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hey there, Thanks for the posting your work.. For your 2.question

    • Have look at your "file path", probably problem here.. Look Here
    • I don't fully understand the problem. This can help; [shadow generator] (https://cssgenerator.org/box-shadow-css-generator.html)
    Marked as helpful
  • stephmunez•475
    @stephmunez
    Submitted almost 4 years ago

    Profile card component

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, Thanks for the post. You need a little more basic knowledge of "FLEXBOX" and "GRID". You can use flexbox for the "layout"

    • DONT margin, padding on "img" its not a good practice. Use them on wrapping div.
    <div> 
    <img src="">
    </div>
    style 
    div {
    margin
    padding 
    height 
    }
    img {
    width: 100% or max-width: 100%
    height: auto
    object-fit :cover // search this.
    }
    

    You can use like this better practice.

    • try to avoid "setting height" not a good practice do it with padding,flexbox,grid etc. (just use it if necessary)
    • Search "absolute position" it can help you.. Keep working.
    Marked as helpful
  • Atinder•100
    @atinderbirsin
    Submitted almost 4 years ago

    Stats preview card component

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, Thanks for the posting your work.. The only problem is stats i guess not same line u can change that. good work.

    Marked as helpful
  • Daniel Dye•25
    @dan-dye
    Submitted almost 4 years ago

    Stats preview card component - Flexbox

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, thanks for the posting your work.

    • In my laptop your site looking like this (https://prnt.sc/1kq5u90), Its Vertical i didn't read all code but probably cause of media or flex,
    • on mobile - tablet ; its overflowing (https://prnt.sc/1kq75cp)Maybe you want to look at it too. Good work.. Keep it up..
    Marked as helpful
  • Manoj Kumar Singh•530
    @manojks092
    Submitted almost 4 years ago

    Responsive Stats preview card component with Flexbox

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hey there, good job.

    • You can use "border-radius" for borders,
    • For purple filter, background color on main div not a good practice, try to use ":before" and "absolute: position". You can check google for information,
    • Your image not responsive, "object-fit: fill" not good for it try "cover",
    • Some margin on stats, when i shrink it they are touching the bottom,
    • On mobile its overflowing, play with flex-wrap, font-size and padding try to fix it,
    • On tablet its not good, have to change it i guess, And the last one try to "not" set height not good practice.. Some of your code not working. Delete some of them..
      I'm sorry for my bad english, keep working^^
  • Bektemir•35
    @bektonix
    Submitted almost 4 years ago

    Stats preview card component

    3
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    Hello there, these are not a big problem no worrys :)

    • First responsive image try this; wrap with div and set width and height for the div
    <div>
    <img src="">
    </div>
    Css: 
    div {
    height: 300px, 50%, 10em etc..
    width:  300px, 50%, 10em etc..
    }
    img {
    width: 100%;
    height: auto; 
    }
    

    You can change width to max-width if you want up to you..

    • Second one for overlay u have to use "position: absolute" and parent should be "position: relative"

    just check it out : this is old but still working :)

    • The last one for margin - padding --> em* (recommended) or " % " for font-size rem*(recommended) and u can use "vh" for height
    Marked as helpful
  • ujjwal•60
    @ujjwal454
    Submitted almost 4 years ago

    profile card page

    1
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    its okey on mi8 lite (chrome and opera) just on opera card background "not white" its "black." rest of its okey good job^^

    Marked as helpful
  • Eduard Mekler•60
    @emekler0729
    Submitted almost 4 years ago

    Stats Preview Card Component with Sass

    2
    Burak CLN•385
    @brkcln
    Posted almost 4 years ago

    When i resize it, its overflowing.. Like this: https://prnt.sc/1j9bwno (after 376px)

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub