@GioCura
@Malekos74
Submitted
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?
@GioCura
Posted
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!
@Lemon1903
Submitted
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!
@GioCura
Posted
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!
Marked as helpful
@kylekasprzyk
Submitted
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.
@GioCura
Posted
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!
Marked as helpful
@dntfindmel
Submitted
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!
@GioCura
Posted
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!
@avgrimshaw
Submitted
QR Code Challenge design to HTML & CSS.
@GioCura
Posted
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!
Marked as helpful
@seanryderjr
Submitted
WELCOMING FEEDBACK, just starting out. Took about an hour to figure out the flex properties and how to position things.
@GioCura
Posted
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!
Marked as helpful
@taco-neko
Submitted
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?
@GioCura
Posted
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!
@Mishael-Joe
Submitted
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.
@GioCura
Posted
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!
Marked as helpful
@PhilipeeX
Submitted
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.
@GioCura
Posted
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!
Marked as helpful
@Fola-Joe
Submitted
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!
@GioCura
Posted
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!
Marked as helpful
@Aibi-Green
Submitted
** 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? **
@GioCura
Posted
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!
Marked as helpful
@juliavilbert
Submitted
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 :)
@GioCura
Posted
Hi! Add "vertical-align: bottom" to your ".image img" and the empty space will disappear. 🙂
Marked as helpful
