Favour• 2,140
@Nadine-Green
Submitted
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.
Mirna-Latif
@Mirna-Latif
All comments
- Mirna-Latif• 80
@Mirna-Latif
Posted
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 - zaheer Abbas• 590
@zahirpk
Submitted
Any feedback will be appreciated. Completed 3 Column Preview Card component
Mirna-Latif• 80@Mirna-Latif
Posted
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 @alawi17
Submitted
How did you remove scrolling? Can someone help me with my code. Thanks in advance 🙂
Mirna-Latif• 80@Mirna-Latif
Posted
Try to set the height: 100vh; to the body tag to remove the scrolling. I hope this will be helpful. body { height: 100vh; }
0
