@DenzDySubmitted over 3 years ago
Anything I could improve? Also, how do I align the stat types to the stat headings properly? Using padding and margin doesn't really work well especially with different text lengths.
Veronika Palto
@JepardMayAll comments
- @JepardMayPosted over 3 years ago
Hello. The easiest way to align stats is using flexbox https://gyazo.com/66422e28c2ec3b3d4246a440957d7a48
Marked as helpful0 - @hameeshaSubmitted over 3 years ago
I think my JavaScript code should be more reusable
@JepardMayPosted over 3 years agoHi! Nice work with this project. Found some things that can be fixed:
-
The page doesn't look good before mobile breakpoint https://gyazo.com/b1842ccec3bd06218dd196ae0c5066e9. Maybe it's worth changing the breakpoint earlier. Also, an icon in the second input goes wild.
-
When you choose custom input whole section hops because of the border. An easy solution is to set the border by default, make it transparent, and change border-color on hover and focus.
-
In the JS file I see that you use the same code twice. Try to create a function, that contains that code, and use it when you need it. All lines of actions that can be used more than one (even only in theory) are worth putting in separate functions as an option.
Marked as helpful0 -
- @Carlos-A-PSubmitted over 3 years ago
- how can I change the color of my share arrow SVG icon? I was able to change the background but not the arrow itself
- is there a way to make sure all of the browsers look the same instead of using individual media queries? I noticed that the app in mobile view looked different in firefox so I added a media query for that browser
@JepardMayPosted over 3 years agoHello. I found that on 320px the bottom-container is going off the container https://gyazo.com/eeecf9eff43a38588d60a1c7c77f1c88. 320px is a minimum width that is worth checking. About your second question. Browser engines are quite different from one another. If you want to know more about it, read about browser rendering.
1 - @rajavarraSubmitted over 3 years ago
My first frontend mentor challenge. Please review my solution and give feedback on following... 1.Responsive development by using Flexbox (especially for this card at break point 769 px - 992 px). 2.Scaling font sizing for different devices. 3.Tips on handling images. (on keeping quality of image across devices ). 4. Any honest feedback on improving code or methods that i followed. Thank You!
@JepardMayPosted over 3 years agoHello. Your solution looking very good! There're a few suggestions:
- The image doesn't look good on width around 1100px and 800px https://gyazo.com/2573162634742bfbc02ee5be52f40d8b. To avoid it you can use
object-fit: coverinstead offill. - On width around 800px these elements https://gyazo.com/6e8899ead82faab8795bde9232b57dec are too close to each other (margin or padding will help)
Marked as helpful1 - The image doesn't look good on width around 1100px and 800px https://gyazo.com/2573162634742bfbc02ee5be52f40d8b. To avoid it you can use
- @Vishaldev098Submitted over 3 years ago
I had a problem in making the background image. since, there were 2 separate images of 'bubbles', I inserted them using 'background-image' property. Is there any easy way to make the background, same as given in the sample of this challenge?
@JepardMayPosted over 3 years agoHello. Not refers to the question but a notice that the avatar gets thinner if the page gets thinner but the height stays the same - it looks odd.
Also, I don't think it's worth making card change width unless it's a mobile. It's plenty of room for the card to stay the same width, but it just a suggestion to consider.
Marked as helpful0 - @DominikRasinskiSubmitted over 3 years ago
Is one problem, it is an image on desktop layout, if I scale to 200% or more like 500%. Scaling website makes shadow jumps between original position. Can you give me tips how can I fix this?
@JepardMayPosted over 3 years agoI don't understand your scaling problem but noticed a problem with the page on a small height when content gets cut because of the absolute positioning. Background-color changes to white when you scroll.
I can't open the accordion if I click on the white space between text and arrow, but the text changes color as it was clicked. You also shouldn't use a div to create a bottom line and use pseudo-element instead.
0 - @Huseyn-SomeGuySubmitted over 3 years ago
I have a problem with error. When I rewrite the correct email how can I make it so that error would disappear?. Appreciate for pointing out my problems with code and making it better :)
@JepardMayPosted over 3 years agoIf there's a problem you throw an error, so add
elseto remove the error message if an email is correct (remove style properties and setinnerHTMLto an empty string again). It'll be good to add an email send by entering press (you can add a new keydown event listener or change button type to submit and listen to the submit event)Also, I notice that the mobile version is not usable on the small height - there's no scrolling, and some content's cut.
Marked as helpful0 - @drajnishSubmitted over 3 years ago
Struggling with positioning
I'm struggling to fix the position of slider arrow want to fix it so it stays with slider div currently it changes its position as the size of the screen changes. i am using position=absolute w.r.t. carousal div
or any other option to fix it.
Any suggestion? Thanks
@JepardMayPosted over 3 years agoHello. You've done a great job with this one.
I have a suggestion for your problem that you can try. Add overflow: hidden to your slider-container and add bottom: 0, left: 60vw (as image container width) for btn-container. For mobile add right: 0 and remove left. As images have no content, that can be changed, you can add height to the image and align the btn-container's top or bottom to this height.
Marked as helpful1 - @zeshanabdullah10Submitted over 3 years ago
Feedback welcome. I don't think the cards layout is looking exactly like the design, please suggest how can I improve that. Also if I set the min-height to 100vh then after resizing browser text and images scramble, what is the correct approach to tackle this? I have used 1200px for height instead of min-height of 100vh.
@JepardMayPosted over 3 years agoHello. Nice work with this project!
If you wanna use min-height: 100vh, you needn't use height in % on container block. I recommend don't use height on this element and use margins and padding on container's children to get the needed height. Also don't use 'width: 10vw' and use 'width: 100%' to avoid unnecessary horizontal scroll on the page.
I recommend don't use divs to add background images and use CSS styles instead for body or container cause these images are not given any information to the user.
I also encourage you to think about if there will be more elements in both the top and the bottom sections. Now, if I add more cards, it wouldn't be looking nice.
For cards offsets, you can use ':nth-child()' instead of classes, and for the top section use margin-right to avoid cards go off the container block.
I hope my suggestions will be helpful. Keep coding :)
Marked as helpful0 - @AthreyaG4Submitted over 3 years ago
I couldn't make the floating box like the way it was in the design. Its bottom left border radius is off. Give me some suggestions on how to achieve this. Thanks
@JepardMayPosted over 3 years agoHello, I have a suggestion for the floating block. You can use a pseudo-element for the triangle and use a clip-path on it and not on the main element. It will be looking like this https://gyazo.com/c153b108adff036e60ec445ee8191b84 . Also, to make the background image looks more like in the design, you can change "background-size" to "contain" and "background-position" to "center bottom".
Marked as helpful0
