@angielxx
Tertsegha Kpughur-Tule Moses
@Mosestule2003All comments
- @Mosestule2003
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 👨🏾💻🙂
- @mbonamensa@Mosestule2003
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 - @thresholdtech@Mosestule2003
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 👨🏾💻🙂
- @vivo1310@Mosestule2003
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 👍👨🏾💻
- @thresholdtech@Mosestule2003
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 👍👨🏾💻
- @thresholdtech@Mosestule2003
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.
- @dumpdope1@Mosestule2003
Hey brother nice eitk, I really love your workflow. Just some little issue, the form validation isn't working and that can be an issue. Here is a link to my GitHub repo with explanation last on how to solve this issue https://github.com/Mosestule2003/Interactive-debit-card-details
- @Dr-Vegapunk007@Mosestule2003
Nice attempt :). Try this in your css when you start; *{ margin: 0; padding: 0; box-sizing: border-box; } This is in reference to the previous comment stating that you should use a default.
- @TheXilot@Mosestule2003
Hey man I really love your work well done. Although they are a few things that I think can help improve your solution.
-
Instead of setting the box-shadow on each grid-item, try setting the box-shadow on the parent grid-container. Also i think a box-shadow of something like (box-shadow: 10px 5px 10px grey;) will work with a lighter grey color.
-
Also to best center the grid-content on display, try setting up the body element with: #display: flex; #align-items: center; #justify-content: space-between; This will help center your content much better. Tell me if this helped, Happy coding bro :)
-
- @Mosestule2003@Mosestule2003
I really appreciate that you took your time to review my work, thank you very much. I will make sure to add the favicon to the project (Thanks for the correction). If you do not mind on the second correction regarding removing the transitions and animations, please could you elaborate a bit more because I was a lost. Thank you again. :)
- @htetarkarko@Mosestule2003
Hey um did you set your repository as public and did you generate a github webpage for ypur work.
- @conogi@Mosestule2003
Hey man, just saw your work and I actually had a similar issue. Here is how you solve this, go to your github repo on the website, set your repo to public. Then you go to settings on the webite, look for pages on the left navigation bar, click on it then set it to root. This will take a while to build up your site. You will get a link still inside the pages webpage which you will then post as your project live work. Hope that was helpful.
