@james-rod
@Jhonneg
Submitted
What are you most proud of, and what would you do differently next time?
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.
@james-rod
Posted
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!
@medo458
Submitted
I know that my code isn't so clean ,and i wrote alot. So help me how to solve that. Feel free to comment
@james-rod
Posted
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!
Marked as helpful
@ZSHenChan
Submitted
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)
@james-rod
Posted
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.
@Johnkings222
Submitted
@james-rod
Posted
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!
Marked as helpful
@Zeddxx
Submitted
Hello Mentors!
Challenge Completed For Newsletter Sign-Up form
Problems I Faced
Thank You! Frontend Mentor ❤️💕
feel free to comment down.
@james-rod
Posted
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!
@Oluwalolope
Submitted
I had problem making the image responsive using source sets. so i used it as a background image. Any tip is highly appreciated
@james-rod
Posted
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!
Marked as helpful
@cmlzzs
Submitted
@james-rod
Posted
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
Marked as helpful
