Skip to content
OverviewSolutions
14
Comments
3
Klara
@klara367

All comments

  • Hawi Girmachew•250
    @HawigirmachewSubmitted about 2 years ago

    The challenge I encountered when creating this project was figuring out how to accommodate the background image. Please offer me your suggestions, since they will help me to better my code.

    Responsive page using CSS Flex-Box

    2
    Klara•270
    @klara367Posted about 2 years ago

    Hi Hawi,

    I just came across your solution. Maybe you've already found out. But I noticed that the reason you have displayed both backgrounds (mobile and desktop) on the screen, is that you put the mobile background to the .social-proof and then the desktop background to the body. So it displays both backgrounds. If you just move the mobile background from the .social-proof to the body, it should work.

    Also, if you want two background images to be placed on different spots, you can write position for each one and separate it with comma, like this:

    body {
   background-image: url("./images/bg-pattern-top-desktop.svg"),url("./images/bg-pattern bottom-desktop.svg");
   background-repeat: no-repeat;
   background-position: top left, bottom right;
}

    You can check it out here

    Hope that will help.

    0
  • Canice•80
    @Canice10Submitted about 2 years ago

    I'm still having some issues with centering the main component card perfectly. Please I'll appreciate the community's feedback on this project.

    Thank you.

    3-column preview card component

    2
    Klara•270
    @klara367Posted about 2 years ago

    Hi Canice,

    nice work! If you want to display your component centered vertically, you need to put some height on flex container. In your case try to put min-width:100vh on main.

    You can check it out here

    Hope that'll help.

    0
  • Fortune Nwikina•40
    @meesuaSubmitted about 2 years ago

    I had an issue removing the white border underneath the image, then I had to remove IMG tag from the div for it to appear the same as the screenshot.

    Product preview card component

    2
    Klara•270
    @klara367Posted about 2 years ago

    Hi Fortune,

    I had the same problem in my latest challenge. I find out, that the white space under div is because img has a display value of inline. If you change it to display: block it should solve the problem.

    You can check it out here and here.

    Hope that will help :)

    Marked as helpful
    0