@ACdev27
Anthony
@ACdev27All comments
- @ACdev27
Thank you!
- @abhik-b@ACdev27
Yes, I think that works better now where when you slide the slider it has 5 distinct positions.
For myself, this was most difficult challenge I have done so far. The range input is very hard to work with in my opinion. In reality, I don't see it used much on websites, so maybe it is not very popular input to be used in real world.
Marked as helpful - @abhik-b@ACdev27
The slider does not seem to be showing the correct prices as specified by the challenge. Maybe this can be some help... I see in your HTML your input element type="range" has the step attribute set to 10. That creates 10 steps along the slider. For mine I had set this range input element set to step="5" to correspond to the 5 different price points that were specified. So my slider was then only returning values of 1, 2, 3, 4, 5 and that made it easier to work with in the JavaScript. I just did something simple then by checking with switch statement those 5 cases to set each of the five prices.
- @Okain0@ACdev27
I just saw one reason you excerpt text is too big on card. You are using h1 tag for these.
First, only use one h1 tag per page. You might instead use h2 for these, or div, or p tag instead.
But aside from that, h1 has its own default size (26px), but they should only be 20px.
You need to at least set your own font size for h1 to override the default, and may want to also use a different tag such as h2, div or p for this text.
Marked as helpful - @Okain0@ACdev27
It looks like each testimonial "card" is too large compared to design. I think you want to check the text size of Name and the first sentence/excerpt of text which seem too large.
Also on very wide screens, the testimonials seem to stretch too wide. I had same issue. I corrected it by using a max-width: 1440 on my grid container.
Marked as helpful - P@ltc870@ACdev27
For the footer, one thing I did to make it more match the design is to set a height for it. I think I used 300px.
Also, for the color of the footer. Using color modes is just one way to get something similar.
Another good technique is where you basically add the photo to the footer first, and then add "another colored layer" over the photo, using pseudo-class ::before on the footer element with the photo background. Then you can adjust the opacity of this layer to get the effect you want. Kind of like something you would do in photoshop instead of using blend modes. Just add a transparency colored layer over the photo.
If you never used pseudo class ::before it is very useful, but it took me awhile to figure it out, but it is working knowing.
- @PecheMelba@ACdev27
I think for the large prices, you need to check font. I think it is correct font family, but the google font import URL does not have any weight parameter. I believe it should be 700 weight. Make sure on google font site you select the correct font with correct weight to use when you generate the import url.
Marked as helpful - @ACdev27@ACdev27
Thank you for your feedback. I agree with what you said that it would be good to use a semantic element like a button instead of making toggle from a div. And I had tried using a button, but had an issue. When you click on a button element, there is a movement of the element when you click it, and the way I created my toggle using pseudo class to add the circular part of toggle did not move along with rest of button, and it looked strange, so I had to switch back from button to div. I could not figure out how to disable the button's default animated effect when clicked on.
- @dimkabuzz@ACdev27
I like how you used grid for the photos, and also the zooming effect on the photos was nice too.
- @Kristiana12@ACdev27
Looks excellent. I just saw one issue. For the footer, when the screen width it is over 1400 px, the footer does not expand beyond that. I think on most websites a footer like this would continue to grow wider, and stay full window width at larger screen widths, and would not just end, and remain 1400px wide, with white space on both sides.
- @ChrisThauer@ACdev27
One easy way to fix some of the accessibility issues is to just put all the page content (everything inside <body> inside a <main> element.
Marked as helpful - @blpeters@ACdev27
On my desktop monitor, about 1920 px wide, the component seems like it gets too wide compared to provided design. I sometimes find I can use the max-width property on the appropriate container, to limit how wide an element can get on bigger screens. max-width will still let it be responsive, but it will reach that limit you set and not get any bigger.
- @katarzyna-kw@ACdev27
There seems to be something strange about the picture element you are using with class="image-container". If you add a border to that element you will see it is much smaller than image. I'm not sure it best choice for this situation. But, I have not used <picture> very often lately.
If you have trouble working with, you might try just using a div for the left side of card, and add the image as a background images. This may simplify things compared to working with <picture>
Then you can add the second image (bg pattern desktop) as a background image and be able to "lock" them together. Right now they move apart as the screen get more narrow. That way both images would be the background for the same element, in this case the div, and would work better together. Since I think they need to stay together.
- @AndreiM987@ACdev27
I see one issue I had myself. In mobile view, if you open more than 3 of the question/answers at same time, the top image gets pushed off screen at top of page. In my case I had to change the flex box settings flex box alignment settings I used in desktop view, for the mobile view.
Marked as helpful - @kenreibman@ACdev27
In mobile view the image looks a little squeezed/distorted. You may want to research the CSS object-fit property, it can help with situations like that.
- @PecheMelba@ACdev27
I was looking at your component at browser widths around 1800px, and also 880px wide. And it looked like at these browser widths the component was getting too wide, based on what is given and suggested by the design files.
For a situation like this have you tried using max-width property to put a limit on how wide certain elements can get?
- @sorengrey@ACdev27
I'm not sure if this was required by the challenge, but I thought from a user experience point of view it was good to have the form input error messages update on the blur event for each input, and recheck if input is valid. That way, if user fixes an error in one of the inputs, they would know that it was correct as soon as they leave the field.
Marked as helpful - @Antonator@ACdev27
It looks like on desktop view the card gets too wide compared to the design.
With responsive design, you may want set a max-width on the card (not just width).
With max-width it will stop getting wide at some point you set, but still will shrink as browser window gets more narrow. Look at design file to match its width for your max-width.
