Skip to content
OverviewSolutions
12
Comments
12
Tertsegha Kpughur-Tule Moses
@Mosestule2003

All comments

  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • Maame Yaa Serwaa Bona-Mensa•70
    @mbonamensaSubmitted about 2 years ago

    I started the project mobile-first and I struggled a little switching from using <img> to background-image because I realized there had to be a change in images in the desktop view. I'd like to know if anyone used <img> all the way for both mobile and desktop and how you went about it. Also please feel free to point out any best practices I may have missed. Thanks.

    Responsive Product Preview Card Component with Darkmode using SASS

    2
    Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • threshold•50
    @thresholdtechSubmitted about 2 years ago

    Hi guys, This the fourth challenge I made. Getting more and more excited, tho' mine is not perfect. Have to learn and learn again.

    HTML, CSS

    1
    Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • Vi•10
    @vivo1310Submitted about 2 years ago

    I'm welcome any comment and if anyone could suggest any useful resource for implementing Grid and Flexbox for this challenge, that would be really helpful. What approach do you use to solve this? Mobile-first or do desktop first then use media query? Thank you all!

    Responsive Product Preview Card using Flexbox

    2
    Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • threshold•50
    @thresholdtechSubmitted about 2 years ago

    Hi guys, this is my 3rd challenge. I'm getting really excited and curious about the other challenge, but I need to really understand each step.

    This one is pretty simple, yet I'm still struggling. Any feedback is really appreciated, pals. TIA. HAPPY CODING! 😊

    HTML, CSS

    2
    Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • threshold•50
    @thresholdtechSubmitted about 2 years ago

    Hi guys,

    This is my second attempt.

    I'm messing up with the code to make it more similar, but I am perplexed about these things:

    1. The first section: the title "10,000 ....". How to make it more identical to the example? as I added the <br/> to make it the same. I make a grid between the "10,000" title and star review by 50% and 50%.

    2. The card deck. There're two issues here: a. How to add the space between the card? Mine is larger than the example, I tried to add the margin, but it doesn't work. b. When it comes to mobile view, the space between the cards gets larger. Guess it's the same with above T_T. Help me....

    So, any advice or suggestions would be appreciated. TIA 😊😊😊

    HTML, CSS, Grid, Responsive

    1
    Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 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
  • Tertsegha Kpughur-Tule Moses•210
    @Mosestule2003Posted about 2 years ago

    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

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

    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.

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

    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 :)

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

    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. :)

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

    Hey um did you set your repository as public and did you generate a github webpage for ypur work.

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

    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.

    0