Would love to know more about centering items in different ways.
Burak CLN
@brkclnAll comments
- @Agastya909Submitted about 3 years ago
- @patricia-hurstSubmitted about 3 years ago
Any advice/feedback appreciated!
@brkclnPosted about 3 years agoHey 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^^
0 - @PulseFictionSubmitted over 3 years ago
Any feedback is appreciated!
@brkclnPosted over 3 years agoHello 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 helpful1 - @dusanlukic404Submitted over 3 years ago
Any feedback would be very helpful :)
@brkclnPosted over 3 years agoHello 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 helpful1 - @SamCastle16Submitted over 3 years ago
Hello everyone!
This is my first attempt at doing this. I only have two months learning HTML and CSS, and obviously this will have errors, so I hope you will tell me what you think about my development of this mini-project and what things could be changed and improved. It would be greatly appreciated!
@brkclnPosted over 3 years agoHello 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 helpful1 - @TejasShekarSubmitted over 3 years ago
p.s. its been less than a month since I started my web dev journey and apologies if you feel that my questions are noob-ish.
- The box shadow is feather light and I just could not find out how to do it.
- Background wave svg did not render on github pages even though I dont have any issues when I previewed the site using live server.
- Any other suggestions for improvement are happily welcomed.
Thankyou.
@brkclnPosted over 3 years agoHey 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 helpful0 - @stephmunezSubmitted over 3 years ago
Hello, this is my 3rd project. Just wanna ask if there's a better way of placing the elements in the card especially the user img I only used margin for it. Otherwise, any feedback is appreciated.
@brkclnPosted over 3 years agoHello 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 helpful1 - @atinderbirsinSubmitted over 3 years ago
Hi,
This is my first challenge on this site and it took a little while to understand but still i tried my best and this is final result , if there's anything that i should change to improve my skills please let me know!..
@brkclnPosted over 3 years agoHello 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 helpful1 - @dan-dyeSubmitted over 3 years ago
This is my first project on this site so I would appreciate any and all feedback for moving forward.
@brkclnPosted over 3 years agoHello 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 helpful1 - @manojks092Submitted over 3 years ago
Any feedback/suggestion is highly appreciated.
@brkclnPosted over 3 years agoHey 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^^
0 - @bektonixSubmitted over 3 years ago
Hello! I am new here. Honestly, I didn't tried as hard as I should on this first project. There are 3 unsolved tasks:
- Responsive images - I think it meant to be something like this: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- Violet overlay (or what is it) - I tried to implement it with complementary div and its 50% opacity. But it's not what it should be :(
- Card's margin. On desktop and mobile there is different percentages, so what unit should I use? Thank you beforehand. Have a good day!
@brkclnPosted over 3 years agoHello 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 helpful0 - @ujjwal454Submitted over 3 years ago
can some one see it in mobile view and let me know if there is a problem or it is fine
@brkclnPosted over 3 years agoits okey on mi8 lite (chrome and opera) just on opera card background "not white" its "black." rest of its okey good job^^
Marked as helpful1