Hello, I am slowly getting the hang of HTML&CSS :D However on the desktop preview, there is this little weird dead space between the shadow and the card element that I didn't know how to fix. The card element height didn't want to get changed Can someone please explain to me what the problem is and how to fix it?
Hi! 👋 I took a look at your code, and what's causing the problem is the min-height: 80vh that you initially set on your .card element. While this height might be good for the mobile layout, it's forcing your card to extend higher than needed for the desktop version.
So, in your (min-width: 80em) media query for .card, you can write min-height: initial or min-height: 0 to reset it. That should take out the dead space!
I have one problem which is how to do the box shadowing in the design into code. Also, I am not sure if the background overlay when hovering the NFT image is an efficient way of doing it. Any feeback is appreciated!
Hi! 👋 The shadow in this challenge seems to be two layers on top of one another. So, in my solution, I input two sets of values separated by commas for my box-shadow, like so:
box-shadow: rgb(0 0 0 / 3%) 0px 36px 15px 17px,
rgb(0 0 0 / 5%) 0px 30px 20px 45px;
Hope this helps!
Hello 👋,
This is my solution for the profile card component challenge. 👨💻
I'm looking for help with positioning the circle images on the background. Looking for guidance on this. Would be interested in an article or video that goes in-depth on this topic.
Thank you for taking the time to view my solution, and for any feedback provided!
I am going to keep doing the challenges to improve my skills.
Hi 👋 For positioning the background circles, I implemented them both as a background-image to the <body> like so:
body {
background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
background-position: right 45vw bottom 45vh, left 45vw top 45vh;
background-repeat: no-repeat, no-repeat;
}
Using viewport units vh and vw in background-position helps keep the two circles aligned with the card as the viewport expands and shrinks.
I'm afraid I don't have an article or video that I can refer to you, but I hope my advice helps!
I could did this challenge with help. I have some difficult with floating and positioning objects above other things, so if someone can help me with how I could place the background and the box, I would be happy. THX!
Hi! 👋 Indeed the positioning of the background elements in this project is tricky.
To place absolutely positioned elements on top of another, you have to play with their z-index. The z-index controls the stacking order of all things displayed on screen.
Since items have a z-index of 1 by default, what you can do is add z-index: 2 to your card__image. This will make it go on top of everything else.
The same principle goes for positioning the box on the desktop version! However, for the desktop layout, I also recommend you to insert the illustration and its shadow as a background-image to your card-container. That way, you wouldn't have to set your card-container to overflow: hidden. This is important, since the box itself must overflow it!
If you want to see how this works, I'd like to refer you to my solution.
Hope this helps!
QR Code Challenge design to HTML & CSS.
Hi! 👋 It's a very clever thing for you to incrementally add margin-top via media queries. However, all you need now to add to your code is min-height: 100vh to your <body>. You've already given it display: flex, justify-content: center, and align-items: center. Those four attributes will center the code no matter how wide the screen would get.
Once you add min-height: 100vh, take out all your margin-top media queries!
Hope this helps!
WELCOMING FEEDBACK, just starting out. Took about an hour to figure out the flex properties and how to position things.
Hi! 👋 Good work on your first project. I noticed that you set your container to position: absolute so that it will be centered. In a way, this works. But it's better practice to center items via the <body> like so:
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
With that, you can take out the position: absolute, and transform attribute you set in your container.
Hope this helps!
I would really like advice on class naming, and keeping my file organized. Right now, it's a bit of a mess and it's difficult for me to find anything in it. Are there any naming conventions that everyone follows?
Hi! 👋 I had the same question when I started out here. I eventually settled on the BEM naming convention. Aside from that, here are some alternatives.
Oh, and it seems like your images don't have alternate text. Alternate text is good for images that are essential to understanding the content of the site. However, since the icons on this project are just for decoration, I think you can get away with just writing alt="". Like so:
<img src="./assets/images/icon-visual.svg" alt="">
Hope this helps, and good luck on your next project!
Hello All, I'm Mishael by name. Building this project was cool, but I'm unsure if using a button to display the result was the right call. Can someone check my code, also let me know if I'm on the right track.
Hi! 👋 Good job finishing the project. Yes, a <button> is not an appropriate element to display the result, since it is not a good practice of semantic html. That is why you are having an html validation error saying that you cannot have <h1> under your <button>. I think it's okay to use a <div> instead.
Hope this helps!
I had trouble trying to implement a 'modal' that would pop up when the 'share' button was clicked. I am unsure how to add the arrow below the 'modal' to make it look more stylish.
Hi! 👋 To add the little arrow under your modal/tooltip, you have to add a ::before or ::after pseudo-element to your "compartilhamento" div.
Go, to your style.css and write something like this:
compartilhamento::after {
content: "";
border: 1.2rem solid;
border-color: hsl(217, 19%, 35%) transparent transparent transparent;
position: absolute;
top: 100%;
left: 50%;
}
Here, the arrow is made by setting border-color to have only one side with a color, and the rest being transparent. You can adjust the size of the arrow by changing it's width in the border attribute. You can adjust the position by changing the top and left values.
Hope this helps!
I had some problems in positioning the images in desktop view and dealing with the overflow of the images. Please, I would appreciate some help with that. Thanks!
Hello! 👋 For this challenge, I implemented the desktop illustration and its shadow as a background-image CSS property. In your case, I think you can set both as the background-image in your "images" <div>. That will ensure that the illustrations don't overflow the card.
Hope this helps!
** What did you find difficult while building the project? **
** Which areas of your code are you unsure of? **
** Do you have any questions about best practices? **
Hi 👋 If you want the image to resize according to the size of its parent container, give the image a width: 100%. In your project's case, you'll have to add padding to the sides afterwards. Keep in mind that the card itself must have a set width for this to work.
As for centering the card, I prefer giving the the html and body a height of 100%, and then setting the body to display: flex, with justify-content: center, and align-items: center. You don't need to set the card as an absolutely positioned item anymore.
Hope this helps!
Guys this is my third project and I still couldnt figure out how to eliminate that line under the image, feedback welcome! Do I need to use <main> the way i used it? How to make that main image fit the whole content? thanks :)
Hi! Add "vertical-align: bottom" to your ".image img" and the empty space will disappear. 🙂
