Okay, this one was harder than I thought. I encountered some difficulties when attempting to convert the mobile design to desktop. My initial plan was to use the 'float' property, but it didn't work. As a workaround, I ended up using 'position: relative' and 'position: absolute'. If anyone knows why this issue occurred, I would greatly appreciate any insights.
Hello Vinicius,
Awesome job on the project!
The solution I can give you would require you to nest your #results card inside your #summary card and use display: flex; to get them next to each other. Then for the mobile media query, use flex-direction: column; to make the #results get forced to the top. Also, don’t forget to use the gap property to get the desired spacing you want!
Very great job on this project!
-L
I'd appreciate your feedback.
Hello, Moon!
Wonderful job on the project!
I just got out of work and came across this project on my phone. I noticed some side scrolling on mobile view. I looked at the code and noticed that there weren’t any media queries. Also, I would recommend that you try transitioning over from using px on text to rem’s.
Was a fun little project to work if theirs any advice on anything I could do better I'd greatly appreciate it.
Hello Jalen!
Love the project and congratulations on completing the challenge! I noticed that the .original class you have has each number/symbol crossed off.
One thing I would recommend on preventing the breaks on the striked portions is to use the HTML <s> to make the whole price crossed off with one line. It should look like this:
<s>$169.99</s>
The next thing I would recommend is to utilize the flex property on your button to center the text and the svg image both vertically and horizontally. This can be done by doing this:
.btn {
display: flex;
align-items: center;
justify-content: center;
}
Then to get some nice spacing between the icon and the text, throw in the gap property on your button. For instance - gap: 1rem;
Let me know if this helps!
Quite enjoyed this, dont know if all the pracice is making it a bit more of an easier ride or not.
i did have a few issues though:
the review boxes at the bottom, dont think the spacing is quite right.
Also the mobile design was a bit of an issue. I think for next time maybe ill do mobile first for some practice.
any feedback or suggestions?
Hello, Matt!
Wonderful job on the project! I have yet to do this one, however I see you were using margin’s to separate the boxes. I would fully recommend trying the “gap” property out. If I had to guess, gap it to between 1rem to 2rem. If you have never used the gap property, it’s as simple as putting:
gap: 2rem;
Let me know how it works out!
Hey guys!
I'm glad to be back! This time, I added an additional constraint to the challenge: building the project in less than 4 hours. It was a little tricky and I haven't had the time to do everything exactly as I wanted but... I did it!
I chose to give me a time limit because I noticed that I can easily spend hours on details just because I find something not good enough and, it can be a problem! That's why today, my priority was to finish the project on time and not to absolutely nail it!
Except that, I have a question: what would you use to create the image purple overlay?
The image that was given to us was black and white so we needed to add the color. I personally used the pseudo-element ::after but I think there are many ways to do so and I would like to know is one better than the others.
Thanks and have fun while coding :)!
Hello, Leo!
Unbelievable! Job well done.
Here’s a wonderful solution to your question if using background-image:
The overlay feature you may be interested in is something called background-blend-mode. The syntax is straight forward and it is a lot quicker (and easier to do) The syntax is as follows,
background-image: url(‘images/(link to image goes here)’;
background-color: periwinkle;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
I had a problem with aligning the little icons beside the text on the right side , so if anyone could help, id be open to that and also , im totally open to feedback and criticism , thats how to learn anyway
Hello!
Congrats on completing this project! I see you’re wondering how to center the icons and everything else on those lines. One thing I’d recommend trying is making the .smallspace div like this.
Let me know if this helps!
.smallspace {
display: flex;
align-items: center;
}
Please can I have some feedback with regards to making my HTML more accessible.
Also some advice on how I could have used more semantic HTML.
Any feedback on my CSS would be appreciated also.
Hello!
First, I’d like to say awesome job on this project!
Now, I’m just a small fish in the pond, but for the accessibility part, I’d recommend putting a title, role, and/or a type on your buttons. Aria attributes are nice things to have as well. I know I could use those a lot more often myself.
