Skip to content
OverviewSolutions
17
Comments
9
Nemanja NIkolic
@nmnjnklc

All comments

  • Nemanja NIkolic•270
    @nmnjnklc

    I found out what is happening with bug I mentioned in question. It says that form.reset() method restores a form element's default values. Even though I did not set default values, it saved last typed values. Setting input value to empty string solved the problem.

  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @bajra03,

    Try removing background properties from all media queries except general body css and this should work:

      background-image: 
                    url(./images/bg-pattern-top.svg),
                    url(./images/bg-pattern-bottom.svg);
  background-repeat: 
                    no-repeat, 
                    no-repeat;
  background-position: 
                    right 52vw bottom 35vh, 
                    left 48vw top 52vh;

    Happy coding!

  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @yathishg,

    there is no need for margins to center a div or some other element. Just add these properties to its parent element and you are good. For your particular situation:

    body {
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

    This will also fix width problem on that card. Note that without that height: 100vh property, card would be horizontally centered, but not vertically. Centering card like does not require additional margins, widths, heights etc. to element.

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @leoweabo,

    Instead of unordered lists (<ul>), try something like this for HTML:

    <div class="statistics">
        <div class="followers">
          <span>80K</span>
          <p>Followers</p>
        </div>
        <div class="likes">
          <span>803K</span>
          <p>Likes</p>
        </div>
        <div class="photos">
          <span>1.4K</span>
          <p>Photos</p>
        </div>
</div>

    and to get that proper design, CSS would be:

    .statistics {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding: 1rem;
     border-top: 1px solid #9696964f;
}
.followers,
.likes,
.photos {
     min-width: 6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @funupulu,

    You could wrap his age with <span> tag in order to target it in CSS. So HTML should look something like this:

    <section class="row-1">
<h2>Victor Crest <span>26</span></h2>
      <p>London</p>
</section>

    and to target that particular <span> you can either give it a class/id, or:

    section.row-1 h2 span {
      font-weight: 400;
      color: #6a6f81;
}

    To get those background patterns in place, try adding following css to your body:

    body {
     background-image: 
                 url(./images/bg-pattern-top.svg),
                 url(./images/bg-pattern-bottom.svg);
     background-repeat: 
                 no-repeat, 
                 no-repeat;
     background-position: 
                 right 52vw bottom 35vh, 
                 left 48vw top 52vh;
}

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    To get that mobile design, try it like this:

    <div class="illustration-container">
        <img class="mobile" src="./images/illustration-woman-online-mobile.svg">
        <img class="desktop" src="./images/illustration-box-desktop.svg">
</div>

    and the css would be:

    .illustration-container {
  width: 50%;
  position: relative;
  min-height: 32.88rem;
  background-image: 
       url(./images/illustration-woman-online-desktop.svg),
       url(./images/bg-pattern-desktop.svg);
  background-position: 
       left -5.2rem top 5.8rem, 
       left -36rem top -16.8rem;
  background-repeat: 
       no-repeat, 
       no-repeat;
}
.illustration-container img {
  position: absolute;
  top: 14.3rem;
  left: -6rem;
}
@media only screen and (max-width: 375px) {
    .illustration-container img.desktop {
          display: none;
     }
    .illustration-container img.mobile {
          display: block;
          position: absolute;
          top: -6.6rem;
          left: 0;
    }
    .illustration-container {
         position:relative;
         background-image: url(./images/bg-pattern-mobile.svg);
         background-position: left 0rem top 0vh;
         background-repeat: no-repeat;
         background-size: contain;
         width: 80%;
         min-height: 8rem;
    }
}

    Hope this helps. Happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Hello, @Joatancarlos

    To get that illustration to be close as much as possible to the design, you can do something like this: HTML:

    <div class="illustration-container">
        <img src="./images/illustration-box-desktop.svg">
</div>

    CSS:

    .illustration-container {
  width: 50%;
  position: relative;
  min-height: 32.88rem;
  background-image: 
       url(./images/illustration-woman-online-desktop.svg),
       url(./images/bg-pattern-desktop.svg);
  background-position: 
       left -5.2rem top 5.8rem, 
       left -36rem top -16.8rem;
  background-repeat: 
       no-repeat, 
       no-repeat;
}
.illustration-container img {
  position: absolute;
  top: 14.3rem;
  left: -6rem;
}

    Those top/left/right positions worked in my case. Feel free to experiment with sizing and position of images.

    Everything else looks awesome. Happy coding!

  • Nemanja NIkolic•270
    @nmnjnklc

    Hello @AldoRdz2001,

    I think the easiest way to center a div (or any element) is to set the following properties to its parent element. For this particular situation:

    body { height: 100vh; display: flex; align-items: center; justify-content: center; }

    Hope this helps.

    Stay safe and happy coding!

    Marked as helpful
  • Nemanja NIkolic•270
    @nmnjnklc

    Thanks for your time and effort to help others improve their coding skills! I much appreciate the advice you gave me, @correlucas! I will try to improve quality of my code on a very next challenge.