Skip to content
OverviewSolutions
8
Comments
3
Mirna-Latif
@Mirna-Latif

All comments

  • Favour•2,160
    @Nadine-GreenSubmitted almost 2 years ago

    Hey guys, I would like some assistance on the background image as I had trouble positioning it, if you have a solution, don't hesitate to help or give any other feedback.

    Profile Card Component

    1
    Mirna-Latif•80
    @Mirna-LatifPosted almost 2 years ago

    Hello, Nadine

    Good job in this project.

    About the background images, i put the two images in separate div in HTML before the main content, then i positioned them in CSS using absolute position for each image after i set position:relative; to the body.

    .bg-image .top{ position: absolute; top: -90%; left: -20%; z-index: -1; } .bg-image .bottom{ position: absolute; bottom: -100%; right: -20%; z-index: -1; }

    Another tip, you should put the attribution class in a footer .

    I hope it is helps.

    1
  • Mirna-Latif•80
    @Mirna-LatifPosted almost 2 years ago

    Hi, you did great job, but i think you should add the @import urls of the fonts at the top of the CSS style sheet before the variables to be applied on the page. Another thing, if you use CSS Grid instead of flex, it will be easier for you at the responsive, you will not need so many adjustments. ex: main { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));} I hope this will help you.

    0
  • Mirna-Latif•80
    @Mirna-LatifPosted almost 2 years ago

    Try to set the height: 100vh; to the body tag to remove the scrolling. I hope this will be helpful. body { height: 100vh; }

    0