Looking to hire developers?
@ACdev27
@ACdev27
Submitted
With CSS Grid I started using grid-template-columns, but then switched to using grid-columns and grid-row. It seemed using grid-template-area would be more work when setting up the media queries. Anyone find grid-template-areas would be better choice?
Any other feedback is appreciated.
@ACdev27
Posted
Thank you!
@abhik-b
Submitted
👋Hello Frontend Mentors , I am returning to web development after a break of 1 year & I started with SCSS . Please suggest me in which ways I could have done this solution more efficiently & more perfect. I will highly appreciate your feedback 🤞
@ACdev27
Posted
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
Submitted
👋Hello Frontend Mentors , I am returning to web development after a break of 1 year & I started with SCSS . Please suggest me in which ways I could have done this solution more efficiently & more perfect. I will highly appreciate your feedback 🤞
@ACdev27
Posted
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
Submitted
right now I do not know flex: grid, so I did it with flex: basis :)) I will be glad to any feedback, it will be interesting to listen to any point of view. /-------------------------------/ Thanks /--------------------------------/
@ACdev27
Posted
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
Submitted
right now I do not know flex: grid, so I did it with flex: basis :)) I will be glad to any feedback, it will be interesting to listen to any point of view. /-------------------------------/ Thanks /--------------------------------/
@ACdev27
Posted
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
@ltc870
Submitted
Here's another project I've completed. Could anyone give me some feedback on this project, I have a few issues I would like to address. The color of the footer photo doesn't match the design, which I've noticed when there's an overlay color on a photo, they never really match the design. I was wondering is there a way to fix this? Or do I just go with what Frontend Mentor provides? Also, the footer itself doesn't matches the design fully. Am I being nitpicky or is there a way I can fix this? Any tips would be awesome, thank you!
@ACdev27
Posted
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
Submitted
@ACdev27
Posted
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
Submitted
Any feedback is appreciated.
I tried using BEM for the CSS here. Any suggestions for improvement for the BEM?
Also, any suggestions or tips regarding accessibility for the toggle switch?
@ACdev27
Posted
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
Submitted
@ACdev27
Posted
I like how you used grid for the photos, and also the zooming effect on the photos was nice too.
@Kristiana12
Submitted
I would love to hear your thoughts, and how could I improve my code !
Thank you! And happy coding :)
@ACdev27
Posted
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.
@blpeters
Submitted
Specifically seeking feedback on the responsive design. First time using media queries and my query seems a little clunky - Any tips to clean up CSS code between desktop and mobile versions?
@ACdev27
Posted
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
Submitted
@ACdev27
Posted
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
Submitted
I had a problem while solving this challenge. First time I clicked the content does not appear, but the second time it worked. I solve this adding inline css property: "display: none" for the content that should not be visible. I don't now if is correct but now it works. Any suggestions ?
@ACdev27
Posted
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
Submitted
MY SECOND ATTEMPT AGAIN -- I spent a good week reviewing how Flexbox works and how I can center content correctly to follow frontendmentor's format. I also tried my best to make the page responsive by making media queries for 375px.
Any feedback is genuinely appreciated, I study hours a day to try and perfect everything on here.
@ACdev27
Posted
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
Submitted
Hello, This is my 10th challenge. Nothing special to say except I've found a usefull trick to add icons in input elements so feel free to take a look on my code. :)
@ACdev27
Posted
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
Submitted
I really enjoyed this one. I got to discover the differences between mix-blend-mode and background-blend-mode, and display: none and visibility: hidden. Both will surely help me in the future. I probably won't be applying gradients over my background images anymore to achieve the overlay look. And I'll probably use visibility: hidden for my error messages from now on to keep the layout in place and prevent elements from shifting.
This also felt like good jQuery practice. I wrote functions that check each input field to ensure nothing is left blank, and that a valid email address has been entered.
If you can think of any ways to improve my solution, I'd love to hear them. Thanks!
@ACdev27
Posted
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
Submitted
Got some issues with responsive, but finally I could solve them. As always any feedback is welcome.
@ACdev27
Posted
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.
@jcombs0929
Submitted
I welcome any feedback on how to improve responsiveness of my code. Thank you!
@ACdev27
Posted
It looks like when it is a mobile view your main headline (card__header) actually gets bigger, and seems too big. In your code you have a media query (breakpoint max-width: 1000px) which is actually making it a bigger font size, when I think you should go with a smaller font size at that breakpoint
Marked as helpful
@praisepelumi
Submitted
Hi, I posted my solution with the aim of getting some help on it. I cannot quite figure out how to make my image enlarge and fill up the right part of the card when the screen grows. I have been working on this for about a week now. Any help/advice would be greatly appreciated. Thank you very much.
@ACdev27
Posted
Maybe this will help: https://www.w3schools.com/cssref/css3_pr_object-fit.asp
@BelayAdamu
Submitted
This is the second challenge I managed to finish at Frontend Mentors. I did not get feedback on my first one and hope to get as many as possible this time around. So please leave your comments and suggestions. I very much appreciate it.
@ACdev27
Posted
In the What We've Said section, on a desktop screen I see quotes from 4 people, but in tablet or phone size screen the quotes just go off-screen so I only see two of the quotes, or one quote on phone size screen.
I think you need to use some responsive design to have this content adjust to the screen size. For example, for tablet screen it might be 2 rows of 2 quotes in a row, or on a phone screen, just one column of quotes.
I have not done this challenge. But I guess another option is if you made it so someone can swipe left and right on this content to reveal the quotes that are off-screen.
@marieachieng
Submitted
How did I do in this challenge?
@ACdev27
Posted
Overall looks good. I would give feedback about two points.
The h2 headlines (SEDANS, SUVs) I think need to be larger font size. From design image it looks like these headers should be taller size than the icons at top of card. If you compare size of icons to size of headers you will see that I think.
Also, as browser window gets more narrow, like tablet size, the buttons at bottom of cards and some of the text, flows outside of the card element. I think this is because you set a height for your .card class. If you remove the fixed height the .card class then the cards will freely expand vertically as the browser window gets more narrow.
Marked as helpful
