Skip to content
OverviewSolutions
28
Comments
5
Edufelibugm
@edufelibugm

All comments

  • RavanCod•250
    @vanessie2424Submitted about 2 years ago

    I'm still having difficulty making it responsive. I think the desktop view is okay, but the image for the mobile isn't showing and I can't figure out why. If someone can help, I will appreciate. Thank you.

    Product Preview Card Component Using HTML and CSS

    2
    Edufelibugm•450
    @edufelibugmPosted about 2 years ago

    Hi, congratulations on completing the challenge. 🥳🥳

    it looks pretty good, and the problem is easy to fix, you just need to add a few properties and modify some, the most important ones to make it look good are 🔧:

    .content {
    max-width: 300px;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.image {
    background-image: url(../images/image-product-mobile.jpg);
    min-height: 250px;
    min-width: 200px;
    border-radius: 10px 10px 0 0;
}

button {
    font-family: 'Fraunces', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    background-color: hsl(158, 36%, 37%);
    color: hsl(0, 0%, 100%);
    border-radius: 4px;
    height: 35px;
    text-align: center;
    font-weight: 500;
    cursor: pointer;
}

    only that 😌

    Have a great day and happy coding 🤖💚

    1
  • Edufelibugm•450
    @edufelibugmPosted about 2 years ago

    Hi bro!! congratulations on your solution! 🥳🥳

    Your design looks good, but it can be improved 🦾

    🔧 any tips:

    • Your body has a display: flex; this causes the footer to be positioned next to your container, you can fix this by setting the property flex-direction: column;. 🖥

    • You could add a :hover subclass on your button to make it have some animation, you can just add an opacity: .5; transition: .5s ease-in-out. ✍

    that's all, the rest is just keep practicing 😌

    Have a great day and happy coding 🤖💚

    Marked as helpful
    0
  • Oishik Biswas•70
    @pippal5536Submitted about 2 years ago

    Hi!! I have two questions that I can not answer. a) I messed up the background circle. I used position property. Is there any better or recommended method to code the background image? b) What is the correct method to center the avatar between two divs? I used negative margin but I know it is not the correct method.

    Thank you:))))

    Profile card with CSS flex box and mobile first approach

    2
    Edufelibugm•450
    @edufelibugmPosted about 2 years ago

    Hi @pippal5536 !!! 😄

    I can't help you with the background but about at center a image between two divs, i recommend you use the atribute position: relative and add attributes how top: ;, bottom: ;, left: ; and right: ; to center the image. ✍

    other solution is the use of atribute position: absolute; 🤖

    Have a great day and happy coding 🤖

    Marked as helpful
    1
  • Edufelibugm•450
    @edufelibugmPosted about 2 years ago

    Hi @Gabriela-hub-89 !!! 😄 Your design looks good, but not it's responsive for mobile resolutions. 📱📱

    It's very easy adjust that, only add @media (max-width: /* resolution where it looks wrong */) { /*your CSS code*/ } , then add the atribute display: flex; flex-direction: column; in your class "cards". 🤖

    And that's it, you already have your design for mobile!!! 🥳 🥳 🥳

    Have a great day and happy coding 💛

    Marked as helpful
    0
  • Edufelibugm•450
    @edufelibugmPosted about 2 years ago

    Hi bro, it's easy to solve the problem in the icons, define the width and height equal in the "a" tag, add border-radius: 50%; and finally add an display: flex with atributes justify-content: center; aling-items: center; , then just look for the correct icons in fontawesome. 🤖

    I hope it has been useful to you ✌

    have a great day and happy coding 😌

    0