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.
David Payne
@dpayne713All comments
- @hns-devSubmitted almost 4 years ago@dpayne713Posted almost 4 years ago
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 - @bluerhythmzSubmitted almost 4 years ago
any feedback welcome
@dpayne713Posted almost 4 years agoHi 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 - @viet88tpSubmitted almost 4 years ago
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.
@dpayne713Posted almost 4 years agoHi 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 - @nicole-tuznikSubmitted almost 4 years ago
Any feedback on how I could improve my code is always appreciated! Thanks!
@dpayne713Posted almost 4 years agoNice 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 - I'd suggest putting a small amount of
- @indraAKSubmitted almost 4 years ago
Any feedback is welcomed 👋!
@dpayne713Posted almost 4 years agoReally 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 - the cards on the bottom - if they are going to other parts of a page or another page I like to add
- @florinpavel22Submitted almost 4 years ago
This looked simpler than it actually was. Gave me a few headaches but in the end I am happy with the result.
@dpayne713Posted almost 4 years agoHey 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 - 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
- @AmanChoudhary003Submitted almost 4 years ago
i got some problem to set the image in their location and i think the program is not that responsive .
@dpayne713Posted almost 4 years agoHi 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 applyingmargin: 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 - @SamyrORSubmitted almost 4 years ago
Any feedback will be welcome!
In love doing these challenges!
@dpayne713Posted almost 4 years agoSamyr,
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 - @AjdeviseSubmitted almost 4 years ago@dpayne713Posted almost 4 years ago
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-soratiSubmitted almost 4 years ago
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.
@dpayne713Posted almost 4 years agoHey 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 - @mesutcifciSubmitted almost 4 years ago
I have a issue with the font-weight. I try to config as in the styleguide but looks different. Could you help me?
@dpayne713Posted almost 4 years agoHey 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 largerletter-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 - @jianninetorresSubmitted almost 4 years ago
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.
@dpayne713Posted almost 4 years agoHi 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