used px for setting font sizes, not anymore
What challenges did you encounter, and how did you overcome them?Sizing thing with rem instead of px.
What specific areas of your project would you like help with?Had some issues with sizing things in general, had to use font size from the style guide as a reference but the final result was a still a bit off.
Hi Jhonne,
I want to say great job on this challenge! If you want to make sure that you that your container is center perfectly, here's what you should do inside your <main> or <div>
<main>
// Rest of your code
</main>
main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
This will allows anything inside you main tag to be center when you use flexbox or grid!
Hope this helped!
I know that my code isn't so clean ,and i wrote alot. So help me how to solve that. Feel free to comment
Great job on the Challenge!
I have a solution to make your outer-container div center in place! I recommend that you use a main tag as a semantic element and once you add it inside the body, use a flexbox to align everything center!
<body>
<main>
<div class= "outer-container">
</div>
</main>
</body>
main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Hope this helps!
I was wondering if there is a simple way of auto-formatting the card number input from users without using frameworks (i.e. auto-spacing 4-digit numbers)
Hello, here a tip,
You should add an input event listeners as it is an effective way to achieve this as well as a combination with the innerHTML property to update the content of card containers. The input event listener on the button triggers the update of the card container's content when the button is clicked. The innerHTML property is used to replace the existing content with the new content generated from the user's input and dynamic numbers.
Great job on the Challenge!
I have a solution to make your outer-container div center in place! I recommend that you use a main tag as a semantic element and once you add it inside the body, use a flexbox to align everything center!
<body>
<main>
<div class= "outer-container">
</div>
</main>
</body>
main{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Hope this helps!
Hello Mentors!
Challenge Completed For Newsletter Sign-Up form
Problems I Faced
Thank You! Frontend Mentor ❤️💕
feel free to comment down.
Congrats, on completing the project! I got a tips that can help: When you are adding an unorderlist with list-items you can use the list-style-image: url(''); which will replace the bullet points to the icon image!
ul{
display: flex;
flex-direction: column;
gap: 10px;
list-style-image: url("assets/images/icon-list.svg");
padding: 20px;
width: 300px;
}
Next for your image container if you want the whole Image to be full then here my solution:
index.html
<div class="img-container">
<img class="desktop-img" src="assets/images/illustration-sign-up-desktop.svg" alt="img-desktop">
</div>
style.css
.img-container{
padding: 20px;
}
Hopes this helps!
I had problem making the image responsive using source sets. so i used it as a background image. Any tip is highly appreciated
Hi! There is a way to make the outer-container be center a few ways. I would also recommend that you use <main> tag in your code as it will make more sense! The way I do it with a flexbox is simple:
main {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
You could use padding or margin to allow the outer-container to be place center, but it's best recommend to use a flexbox or grid!
Hello There,
If you want to make the body or the main be align in the center. I have two option
In this case for a flexbox main{ display: flex; justify-content: center; align-items: center; min-height: 100vh; }
Hope this helps
