Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions14Comments49

All comments

  • H.N.S• 160

    @hns-dev

    Submitted

    Even though I made the body height 100vh and used overflow: hidden, it still takes more than that in mobile devices. I'd be grateful if someone enlightens me about the reason behind this.

    Article Preview Component mobile first solution

    1

    David Payne• 1,205

    @dpayne713

    Posted

    that's a tricky one. Short answer is 100vh is the full device screen -- NOT the browser available window. In leu of trying to go deeper on this feedback form... check out these resources:

    https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

    https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Bluerhythmz,

    Looks nice!

    When you have a chance to make it responsive using media queries be sure to re-post. Look forward to seeing it.

    Best,

    David

    0
  • TP• 40

    @viet88tp

    Submitted

    For some reason I'm getting a scrollbar even though I'm using 100vh on the body... Didn't get a chance to do the phone view yet. Also made it so that you can only view one answer at a time, since I don't know how to extend the container.

    FAQ Accordion solution

    1

    David Payne• 1,205

    @dpayne713

    Posted

    Hi TP,

    You are getting the horizontal scrollbar because your arrow div has a width of 500px and is causing that stretching. You should define a width for that to help with this issue.

    One trick to try is if you have a component that you know is it's own entity and all contents must stay inside is to use overflow: hidden on the container for the component. Then anything that overflows will disappear. It's not super helpful for troubleshooting code but has some helpful use cases.

    Hope this helps.

    David

    1
  • David Payne• 1,205

    @dpayne713

    Posted

    Nice Job Nicole,

    It looks great and the form validation seems to be fully functional.

    • I'd suggest putting a small amount of padding-right on the .text div so that when screens get smaller the text isn't right up against the photo.
    • I'd also recommend starting to look into BEM naming for your classes. It helps a lot with SCSS nesting when you get deeper into large projects. http://getbem.com/naming/

    Keep it up!

    David

    1
  • David Payne• 1,205

    @dpayne713

    Posted

    Really nice job here. Very pro presentation .

    One very small thing I notice.

    • the cards on the bottom - if they are going to other parts of a page or another page I like to add cursor: pointer to give that feedback to the user that they can click something.

    Keep it up! David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Hey Florin,

    Nice job! this one is deceptively tricky.

    • Heads up for Safari browser you will need to give some elements a defined height value for them to not stretch strangely. for example your .publisher div would need a defined height as it's currently stretching to 175px of height and messing with the aspect ratio of the picture.

    Keep it up!

    David

    3
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Aman,

    Looks pretty good! You are right there is a bit of an issue with responsiveness. I'd recommend putting the whole component in a wrapper div that way you can center that div by giving it a defined width and applying margin: 0 auto. This, however, is only one of many ways to fix it. This site has great explanations on these types of css inquiries: https://css-tricks.com/centering-css-complete-guide/

    I like how the questions expand up and down. I might also recommend making that functionality work when you click on the question as well - as that tiny arrow will be difficult to click on a mobile device.

    Keep it up!

    David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Samyr,

    Nice job! Looks great and is nice and responsive.

    The stars get a little small on some screen widths. Looks like they may be a percentage rather than a fixed value? Might try sticking to a fixed values for them as their container boxes really aren't changing size that dramatically.

    Keep it up!

    David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Hey!

    Nice Job! Looks good, it is responsive and the shorter seems to work well - it also rejects things that aren't links. nice!

    • Check your hover states on mobile. The color of the hover state is the same as the menu so the links disappear.

    Keep it up!

    David

    1
  • Gustavo Sorati• 70

    @gustavo-sorati

    Submitted

    Hello,

    It's my first challenge, I used setTimeout to do the 'flip' effect, but I'm trying to do this with requestAnimatedFrame, you can see the script in script-v2.js, but in this version (v2) there will still be some bugs.

    Any feedback is welcome and I hope you have a good day.

    Countdown timer w/ flip effect animation

    1

    David Payne• 1,205

    @dpayne713

    Posted

    Hey Gustavo,

    Looks nice! It is responsive and the countdown appears to be working well.

    I notice that the 'seconds' counter seems to be inverted. As in -- the shadow appears to be above instead of below the counter 'box'. This is in Desktop Safari. FYI.

    Best,

    David

    0
  • David Payne• 1,205

    @dpayne713

    Posted

    Hey Mesut,

    I don't have the original design in front of me but it looks to me like the design has a larger font-weight and also a larger letter-spacing on the items that I can notice the difference on.

    I also noticed that on your image you should add object-fit: cover or some other method of auto re-sizing the image as the aspect ratio is changing on some screen sizes.

    Hope this helps a bit.

    David

    1
  • Jiannine Torres• 210

    @jianninetorres

    Submitted

    This is still an ongoing project so no feedback is required at this time.

    The countdown now works, though I'm still working on figuring out how to make the card flip as the time changes, among other improvements. I'm looking into learning GSAP for animations, and using a testing library like React Testing Library.

    React Custom Countdown Timer

    2

    David Payne• 1,205

    @dpayne713

    Posted

    Hi Jiannie

    I like this idea of the input countdown page, but I'm currently not able to get past it. Tried it in Safari and Firefox.

    David

    1
  • David Payne• 1,205

    @dpayne713

    Posted

    Hey Vincent,

    Looks good! Don't be too hard on yourself. I think you did a good job and the code follows good practices.

    What in particular are you struggling with on the background? Looks like your end result got you pretty close!

    David

    0
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Boyan,

    Looks nice and works well.

    I found a bug that causes a formatting issue in Safari. You need to add height: 5rem to .profile__img in order for the picture to not try to auto expand to its original height. Not an issue in Chrome but looks strange in Safari.

    Looks like something similar is occurring on Safari for the Mobile design on the height of the elements. The share box is not all the way at the bottom. May require a defined height to that lower content parent container.

    hope this helps.

    David

    0
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Boyan,

    I like this solution. It looks nice and is responsive. Cool animation on the box!

    • I like your use of the details, summary html tags but I wish that the height of the opening content slid in instead of suddenly appearing. I found this link on CSS tricks to experiment with if you so desire to look further into that.

    https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

    Keep it up

    David

    0
  • Goksel• 210

    @gokseloz

    Submitted

    Hi everybody! It would be great to take a look at the project and give some feedback about anything therefore I get a chance to improve myself. I am looking forward to it.

    Countdown Timer

    3

    David Payne• 1,205

    @dpayne713

    Posted

    Hi Goksel,

    Looks nice! Great job. I like all your notes to yourself in your css file. Very helpful.

    I’m viewing on mobile and wanted you to know that all the counters are getting pressed together in the center with no gaps between them. This is happening in both horizontal and landscape mobile safari.

    If you feel up to the challenge try incorporating the flip effect. On this one I did it by animating an additional div that gets both numbers - sits on top of the top one - flips down - and then disappears and resets on the top one again - over and over.

    Hope this helps.

    David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Arihant -

    Looks nice!

    • I’m viewing on mobile. And when I’m horizontal the share button (when clicked) is expanding to the entire container div height. I’m also not seeing the pop up in horizontal mode.

    • the pop up in mobile is working and looks nice! It might be nice to have it toggle back off if you click the share button again.

    • I’d encourage you to look into using a separate style sheet for your projects. As you can see even this small component can take a lot of code so it helps to keep things organized.

    Hope this helps Keep it up!

    David

    3
  • Magda• 70

    @magpe30

    Submitted

    Hi! That was a fun challenge! My solution is far from being perfect. Any advice welcome:)

    HTML/SASS chat_app

    2

    David Payne• 1,205

    @dpayne713

    Posted

    Magda,

    Looks nice, Nicely done -

    • Looks like your media query could happen a bit earlier so the text doesn't get smashed up against the phone object.
    • One minor thing is I prefer to add classes to even the nested h1, p, etc tags so they have the same specificity. [See this link for a bit more]{https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#Specificity_2}

    Keep it up!

    David

    1
  • David Payne• 1,205

    @dpayne713

    Posted

    Mehmet,

    Nice Job! Looks nice - That's a big project .

    Couple of things to add some polish to the project:

    • In desktop sizes the header image isn't going across the entire viewport.
    • Some 'hover' states would be great on some of the buttons. The links in the footer also don't have cursor: pointer or a hover state to give feedback to the user that they can click on something.
    • in mobile sizes the 'quick search' 'iCloud link' etc text section has some placement issues. currently the paragraph elements are text align center but their container is to the far right of the screen.

    Hope this helps a bit, Keep it up!

    David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Hey Hernando,

    Looks nice, and works well.

    • one minor thing I noticed is every time you click on something or type in the input box the whole list jumps a bit. Just slightly distracting especially when typing fast!

    Keep it up!

    David

    0
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Rafet,

    Nice Job! looks nice and works well!

    • It appears the background image for 'light' mode is a broken link. I've also had that issue when using GitHub pages - I'm pretty sure that is one of the main reasons that this site recommends using Vercel.

    • I kinda wish that instead of an alert for the clear completed it popped up a hidden div or something instead.

    • another super minor note - when you choose 'completed' the completed checkbox is not selected on those elements making it ever so slightly confusing as to if the item is completed or not.

    Hope this helps,

    David

    2
  • David Payne• 1,205

    @dpayne713

    Posted

    Nice animation. Cleaver way of implementing the counter too!

    Hard to find anything to improve

    • maybe set a fixed width on the card__social class so that as the number increments it doesn't move the display text below.

    Keep it up!

    David

    1
  • John Andrei Gayeta• 10

    @gayeta-aj

    Submitted

    Any advice or tips with the background? Saw a fix from another solution and tried it, but I am not sure how it worked so I really need some help, thank you so much!

    Finished Profile Card Challenge

    1

    David Payne• 1,205

    @dpayne713

    Posted

    Hi!

    Are you referring to how the bubbles get cut off on the background?

    You could add height: 100vh to the body element in css and then add height: 100% to the main element and it would expand the background to fill the height.

    1
  • David Payne• 1,205

    @dpayne713

    Posted

    Hi Wenadev,

    Looks nice, I like this as well. Nice responsive design.

    • I'd prefer to see your media query happen a bit sooner as all the elements start to get a bit stretched out. In the screen widths that tablets would be looking at this site at.

    Hope that helps,

    David

    0