Skip to content
OverviewSolutions
16
Comments
6
Frank Ruiz
@fruizotero

All comments

  • Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    @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
    @Iniy96Submitted about 2 years ago

    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??

    Responsive landing page using html and css

    3
    Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    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; 
}

    Line height

    Marked as helpful
    0
  • Petabyte•190
    @peta-8-bitSubmitted about 2 years ago

    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.

    Respinsive Product Preview Card using HTML and CSS

    3
    Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    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
    @TagviSubmitted about 2 years ago

    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.

    Flexbox, Grid-template-areas

    1
    Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    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
  • Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    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
    @Elis0uSubmitted about 2 years ago

    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 ^^

    stats preview card component main

    1
    Frank Ruiz•410
    @fruizoteroPosted about 2 years ago

    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