Denzell Dy• 30
@DenzDy
Submitted
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
@JepardMay
All comments
- Veronika Palto• 305
@JepardMay
Posted
Hello. The easiest way to align stats is using flexbox https://gyazo.com/66422e28c2ec3b3d4246a440957d7a48
Marked as helpful
0 - Hameesha Rantharu• 170
@hameesha
Submitted
I think my JavaScript code should be more reusable
Veronika Palto• 305@JepardMay
Posted
Hi! 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 helpful
0 -
- Carlos• 1,110
@Carlos-A-P
Submitted
- 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
Veronika Palto• 305@JepardMay
Posted
Hello. 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 - Varra Raja Mohan Reddy• 20
@rajavarra
Submitted
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!
Veronika Palto• 305@JepardMay
Posted
Hello. 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 helpful
1 - The image doesn't look good on width around 1100px and 800px https://gyazo.com/2573162634742bfbc02ee5be52f40d8b. To avoid it you can use
- vishal• 35
@Vishaldev098
Submitted
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?
Veronika Palto• 305@JepardMay
Posted
Hello. 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 helpful
0 - Dominik Rasiński• 20
@DominikRasinski
Submitted
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?
Veronika Palto• 305@JepardMay
Posted
I 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• 85
@Huseyn-SomeGuy
Submitted
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 :)
Veronika Palto• 305@JepardMay
Posted
If 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 helpful
0 - Rajnish Deshmukh• 200
@drajnish
Submitted
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
Veronika Palto• 305@JepardMay
Posted
Hello. 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 helpful
1 - Zeshan Abdullah• 145
@zeshanabdullah10
Submitted
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.
Veronika Palto• 305@JepardMay
Posted
Hello. 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 helpful
0 - Athreya G• 410
@AthreyaG4
Submitted
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
Veronika Palto• 305@JepardMay
Posted
Hello, 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 helpful
0
