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?
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.
Any suggestion for fix the background-position of the background-image?
Thank you.
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!
hello everyone, this is my first web page. happy to share with u all
open for your advice and suggestions
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!
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?
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!
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.
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!
How to leave the image equal to the example?
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!
How to leave the image equal to the example?
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!
The most difficult part was center a div.
And i think i use best practice in css but no in html.
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!
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.
