Skip to content
OverviewSolutions
12
Comments
12

Tertsegha Kpughur-Tule Moses

@Mosestule2003Nigeria210 points

I am a junior frontend developer and I am working on work.

Latest solutions

View more solutions

Latest comments

  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hey really good solution you have here 👍. Just a few tips to help improve the solution. Try adding (overflow-x: hidden;) to your body element. Also for the image I noticed it did fit its respective container but some part of it was covered. To fix this you can give the container a position of relative and the image itself a poison of absolute. Hope this was helpful, happy coding 👨🏾‍💻🙂

    0
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hey 👋, really love your solution 👌. Just a few tips that can help out.

    • I noticed you added a feature to your work to alternate background colors. Try adding a box shadow to your card container to express it more on the white background.
    • Also in terms of using image, what I usually do is create a custom image class and assign it to my desired image element. Then in css I add ( width: 100%, height: 100%, and object-fit: cover:). This works really well, and I can persist the custom image name wherever I want to use an image element. Hope this helped, happy coding 👨🏾‍💻👍
    Marked as helpful
    1
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hey again 👋 just here to help out with some tips. You really have a good solution here. Just a little suggestion ok 🙂.

    • I noticed that on the smaller screen it doesn't look responsive. Try adding this and it should be alright. (Add this to the container of your card) .container{ Position: absolute; Top: 50%; Left: 50%; Transform: translate(-50%, -50%); } Hope this helps, happy coding 👨🏾‍💻🙂
    0
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hey I really love your work 👍. Although a have a few tips to help improve your work.

    • On the mobile screen size try reducing the padding to something like 1em. Hope this helped, happy coding 👍👨🏾‍💻
    1
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hey just saw your solution, again amazing work. 👍 Just a few tips to help with your work

    • First use
    • body{ Display: flex Align-items: center; Justify-content: center; } Or you can use this *body{ Position: relative; } *container{ position: absolute; Top: 50%; Left:50% Transform: translate(-50%, -50%); } This will center your container in your page properly.
    • Secondly to make the last two containers responsive for mobile use this
    • create a grid container and two grid items .Grid-container{ Display-grid: grid; Grid-template-column: repeat(2,1fr); Grid-auto-rows: minmax(100px,auto); (This is to make the container responsive). } Within the grid-item containers you made put the content meant from the green boxes there.
    • lastly add a media query for the responsiveness, and target the grid- container class giving it a display of block. With this you have an improved solution. Hope this helped happy coding 👍👨🏾‍💻
    0
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted over 2 years ago

    Hello there, really love your work flow 🙂👍, Just a few thing I believe if you change you will get a better result.

    • First off try this Body{ Display: flex; Align-items: center; Justify-content: center; This will help align your work container directly in the middle.
    • secondly for me to Match the solution I created a parent grid container and did Grid-container{ Display-grid; Grid-template-columns: repeat(1, 1fr) Grid-auto-rows: minmax(100px, auto). } With doing this I created two grid item container which then will allow both to occupy the top and bottom of the grid container, as per the repeat (1, 1fr).
    • Thirdly try creating sub- grid items for each grid-item container. In this case two sub-grid-items containers for the top and three for the bottom( this is were you the. Put the content of your hero cards).
    • With this I believe you will have a much derived outcome. Hope this was helpful.
    0
View more comments