@nmnjnklc
@nmnjnklc
Submitted
There is a bug in validation which I'm not sure how to fix. Submitting invalid mail format shows an adequate error message, but if you submit a valid mail format, next invalid input will be considered as valid even though I am resetting form 2 seconds after every input.
Can someone tell me what is actually happening here?
@nmnjnklc
Posted
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.
@bajra03
Submitted
Any suggestion for fix the background-position of the background-image?
Thank you.
@nmnjnklc
Posted
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!
@yathishg
Submitted
hello everyone, this is my first web page. happy to share with u all
open for your advice and suggestions
@nmnjnklc
Posted
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
@Leonardclc
Submitted
How do i centralize my <ul> properly without positon:relative?
What do I need to change to get the same font design from the screenshots?
@nmnjnklc
Posted
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
@funupulu
Submitted
Shout out to Web Coach on Youtube. Had to watch tutorial on how to positioning the profile picture. Still don't get it.
(https://www.youtube.com/channel/UCVu2I45VQ_TVin4MGEy4o4Q)
I wonder how to target certain elements inside a container? For example, the 26 next to Victor's name. How do I target only those characters for style?
.row-2, the bottom half of the card. I know there is a better way than just writing span everywhere.
I forgot the background. I'll come back to that later.
Always thank you for any feedback.
@nmnjnklc
Posted
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
@Joatancarlos
Submitted
How to leave the image equal to the example?
@nmnjnklc
Posted
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
@Joatancarlos
Submitted
How to leave the image equal to the example?
@nmnjnklc
Posted
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!
@AldoRdz2001
Submitted
The most difficult part was center a div.
And i think i use best practice in css but no in html.
@nmnjnklc
Posted
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
@nmnjnklc
Submitted
@nmnjnklc
Posted
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.
