Akinrinlola Henry• 310
@Procodx
Submitted
had difficulty in creating the card which says 185GB left....anyone with suggestions on how to do it would be very appreciated.
Frank Ruiz
@fruizotero
All comments
- Frank Ruiz• 410
@fruizotero
Posted
@Procodx good job on finishing the challenge.
Regarding what is missing in the card you could add it with the pseudoclass "before" or "after", you would only have to put the positioning "relative" to the element that you are going to apply the pseudoclass, since the content that you will add will have an "absolute" position. In the following way you could solve it:
.last { position: relative; } .last::before { content: ""; width: 0; height: 0; border-top: 1.5vw solid #fff; border-left: 1.5vw solid transparent; position: absolute; bottom: 0; right: 0; transform: translate(0%, 95%); }0 - Iniyavan• 220
@Iniy96
Submitted
Help me out with setting the background. And in this project, I have set the background in the HTML page as img type. I have set the margin and border as 0. Even then I can see a white line below the image(background curve). Why was that happening??
Frank Ruiz• 410@fruizotero
Posted
It is due to the line-height that all block elements have in this case your div with the "background" class. Add this and it should fix it:
.background { width: 100%; line-height: 0; }Marked as helpful
0 - Petabyte• 190
@peta-8-bit
Submitted
If you look closely there is maybe 1px or 2px extra height for the card below the image which just has the background color white. Don't know why it happens or how to make the entire height of the card taken by the image. Please let me know if you can solve it.
Frank Ruiz• 410@fruizotero
Posted
I think they already helped you with some solutions, but in case you want to try it some other way.
The white space you see below the image is due to line-hieght. You can fix it by adding the following
.card { line-height: 0; } .cardtext { line-height: normal; }Here you can read more about it line-height
1 - Oto• 400
@Tagvi
Submitted
The solution for keeping a correct image height for the bottom third is suboptimal, it results in smaller images here and there. If anyone knows the reason, LMK.
Frank Ruiz• 410@fruizotero
Posted
As far as I can see the height value of the images is in pixels and it changes according to the size of the viewport. If you put a "height:100%" of percentage the images will adapt according to the content and will maintain the same size.
0 - Daniel• 20
@DanielMillanR
Submitted
how did you place the color on the background?
Frank Ruiz• 410@fruizotero
Posted
You can achieve this through the "mix-blend-mode:multiply" property that you apply to your image inside the picture. Remove the opacity from the next class;
.card_header_pictures { border-radius: 15px 15px 0px 0px 0px; background-colour: hsl(277, 100%, 67%); opacity: 0.5; } .card_header_picture { width: 100%; height: 100%; border-radius: 15px 15px 0px 0px 0px; opacity: 0.7; mix-blend-mode: multiply; }Marked as helpful
0 - Elis0u• 130
@Elis0u
Submitted
I've a few problem with image ... I don't know why. She does not take the size of her parent. If you can help me, it's with plasure !
Sorry my english isn't very good ^^
Frank Ruiz• 410@fruizotero
Posted
The problem is that you have the "with" property set to "auto", declared in an inline style.
<img src="./images/image-header-header-desktop.jpg" alt="header img" style="/*! width:auto; */">You should remove it and give it a width of 100% in your stylesheet and it should fix the problem. Also I would advise you not to give inline styles unless you are working directly with javascript or frameworks, in this case for example if you don't remove the inline style and apply the width:100% in the stylesheet, the latter will be ignored because of the specificity.
Marked as helpful
0
