Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions49Comments190

All comments

  • Luka Glonti• 3,420

    @lack21

    Posted

    Hi there, that's a good work right there, but I have some recommendations!

    • Instead of width: 310px in .container add width: min(500px, 90vw), it will adjust width to 500px and if screen's width will be less than 500px .container will adjust to it!

    • Replace margin: auto in .container to margin: 1.5rem auto to add some additional space to the top and bottom!

    Good Luck! 👍

    Marked as helpful

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Great work 👍, but I have a suggestion for you!

    • Remove background-size: 100% 100% from class .hero and add these styles instead
    background-size: cover;
background-position: center;

    like this background image will fit well on all devices!

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍, but I have a suggestion!

    • Add background-size: contain to the body, so background image would fit well on larger devices!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍, but I have a suggestion!

    • Instead of padding: 1rem 1.2rem in the class .point use these styles
    width: 3rem;
height: 3rem;

    like this circles will be round!

    Marked as helpful

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have a suggestion!

    • Remove these styles from .container
    margin-top: 100px;
height: auto;

    and add min-height: 100vh instead, like this layout will be centered!

    2
  • levy_m• 60

    @LevyMatias

    Submitted

    • I used the B.E.M methodology in my solution to have better management of my html and css classes.
    • I believe it is not 100% identical. I couldn't expand the background image to cover the width of the screen, so I didn't put it in.
    • Any hints or suggestions I will be grateful.

    Order summary card

    #bem

    1

    Luka Glonti• 3,420

    @lack21

    Posted

    Great work 👍, but I have some recommendations!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    • Remove width: 100% from the body, body is a block level element which by default takes full space available, so width: 100% does nothing here!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Great job 👍, but I have a suggestion!

    • Remove following styles from the .wrapper
    width: 100%;
height: 100%;

    they do nothing here!

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    This comment was deleted

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have some suggestions!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    • Add margin: 0 to the body, this will remove all unnecessary space!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Great work 👍, but I have some recommendations!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    • Remove width: 100% from the body, body is a block level element which by default takes full space available, so width: 100% does nothing here!

    Marked as helpful

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍, but I have some recommendations!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    • Remove width: 100% from the body, body is a block level element which by default takes full space available, so width: 100% does nothing here!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have a suggestion!

    • Remove padding-top: 5% from the body and add these styles instead
    min-height: 100vh;
justify-content: center;

    like this layout will be centered!

    0
  • P
    Alexander Bobykin• 90

    @abobykin

    Submitted

    Hey guys! How're you doing!? :)

    • I'm trying to comprehend what is fully accessible markup on practice, that's my attempting, check it out! ;)
    • And also maybe could you please take a look and possibly give me some useful advices in general and especially on how to feel my head more safe in dealing with more easily adaptive typography sizes for mobile/desktop, looks like I'm struggling a bit with amount of "pixel rules" (I remember that we have *rem and *em in CSS and many more, right?).

    I'll be happy to catch any of kind of Frontend Guru advices :) to start making things more right way at last.

    THANK YOU!

    Interactive rating component - Keyboard accessible form / Vanilla JS

    #accessibility#bem#lighthouse

    2

    Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍, but I have a suggestion!

    • Remove padding: 155px 0 from the main and add min-height: 100vh instead, like this it will be centered!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have some recommendations!

    • Replace height: 100dvh to min-height: 100dvh in the body, the difference is that, when you set height: 100dvh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100dvh, like this in case content is overflowing container will adjust to it!
    • Remove width: 100dvw from the body, body is a block level element which by default takes full space available, so width: 100dvw does nothing here!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Great work 👍, but I have a suggestion!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

    Marked as helpful

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have a suggestion!

    • Add background-size: cover to the .crew-back, like this image will take the full space available!

    Marked as helpful

    0
  • Parviz Parastar• 80

    @Parviz-Parastar

    Submitted

    Hello to all friends who are active on this site.👋

    In this exercise, I tried to write the elements of each section according to the BEM method completely and accurately and have a clean code.

    To build a better world, I will be very happy to read your comments and help each other to progress.🎉

    Order summary card design with BEM/flex/CSS3

    3

    Luka Glonti• 3,420

    @lack21

    Posted

    Great job 👍, but I have a suggestion!

    • Add background-size: contain to the body, like this image will take the full width!

    Marked as helpful

    1
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good work 👍, but I have a suggestion!

    • Change image source from \images\icon-cart.svg to .\images\icon-cart.svg, like this cart icon will be visible!
    0
  • 00013519• 110

    @00013519

    Submitted

    How to implement transition in output text, so that when changed by js, it appears smoothly or with some effect, not just suddenly. I tried to implement that in css, but didn't work. Would be glad to hear any ideas)

    HTML, CSS, SASS, JS

    #sass/scss

    2

    Luka Glonti• 3,420

    @lack21

    Posted

    Excellent job 👍, but I have a suggestion!

    • Remove margin: 20vh auto from the main and add these styles to the body
    display: grid;
place-content: center;
min-height; 100vh;

    this will center the layout and remove all unnecessary space!

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍, but I have a suggestion!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!
    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Excellent work 👍, but I have a suggestion!

    • Replace height: 98vh to min-height: 100vh in the body, the difference is that, when you set height: 98vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

    Marked as helpful

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good job 👍!

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Great job 👍, but I have a suggestion!

    • Remove these styles from the .title .row
    margin-right: calc(-.5 * var(--bs-gutter-x));
margin-left: calc(-.5 * var(--bs-gutter-x));

    they are causing the overflow!

    0
  • Luka Glonti• 3,420

    @lack21

    Posted

    Good work 👍, but I have a suggestion!

    • Replace height: 100vh to min-height: 100vh in the .container, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

    Marked as helpful

    2