TayAki79• 160
@TayAki79
Submitted
Here is my solution for the Product Preview Card Component Challenge. Hit me up if you like it or have better ideas for me to write much more cleaner code. Appreciate it in advance!
TayAki79
@TayAki79
All comments
- TayAki79• 160
@TayAki79
Posted
Hey @vcarames, thanks man. Absolutely astonishing advices you providing me. But I guess I will correct them later this day since I only have to hours left to sleep ^^
Hit you up later!
Best regards, AkraDEV
0 - Victor• 270
@cervantesdeveloper
Submitted
TayAki79• 160@TayAki79
Posted
Hi Victor,
thanks man. Haha, in fact I googled it like to today the first time how to use different images respectively different image sizes so you can automatically change them whenever you change the width of your project using @media queries. Then I found so many different ways of using the srcset attribute. But whatever man, as long we have the same solution I guess for now it's all good. We still have time to dive deeper into this rabbit coding hole. Peace!
^^
0 - Swing95• 180
@Swing95
Submitted
Hello,
could you please advice on:
- In the part with plan and price I could not access the Change to move it to the end when used space-between and wanted to move change to the end using nth-child
- How can I improve working with width and height on different screens please?
Thank you in advance!
TayAki79• 160@TayAki79
Posted
Hi @Swing95, congratulations on this challenge first.
-
I see that you use display flex on class="plan" which is a beautiful thing thus you can align all the three elements (music-icon, plan-price and change) in one line. Unfortunately the justify-content doesn't really work since you don't want the gaps between those items having the same distance. So to me I guess the way you did it with margins is the easiest way to accomplish it. Another way is to use 'display: grid'. If you are familiar with this property it would be a beautiful thing to do to get a clean code.
-
OK, now I did view your code =). I think the best way to understand width and height is to first understand, that the size of an element is relative to the size of the body and the size of the body is relative to the size of the html page. Since the html element is the parent of everything that comes next you can say that the html width and size will take up the whole screen. Now, if you set the body's width to a 100% this means that the body width take up the same size of the html width. Which means if you resize the width of your screen smaller or bigger the body's width will follow as well. The size of the html takes up the whole screen size which is 100vh (viewport-height). Here you can also use 100vh for your body element since the project only takes up 100vh or less. If you're not quite sure about the height I would recommend to use min-height of 100vh for the body element which means that your site takes up 100vh or more than this if you have i.e. more pages the user can scroll down.
Alright! I hope this will take you any further and if not I'd love to work and learn together with you if you want to. Just hit me up!
Best regards,
AkraDEV
0 - Victor• 270
@cervantesdeveloper
Submitted
TayAki79• 160@TayAki79
Posted
Hi, congrats on finishing this challenge. I like your code. I just finished it as well and I have to say that I really had a hard time with the @media query by targeting the desktop-img of the srcset. How was it for you?
Keep the good work! =)
1 - Gabriela• 180
@PaulaR-05
Submitted
Here is my solution to the Interactive rating component ✨ I couldn't add the purple opacity...Can someone help me with this, please? :) 😊 Happy to hear any feedback and advice. Thanks!
TayAki79• 160@TayAki79
Posted
Hi Gabriela,
nice job. I still can remember when I first worked on this challenge took me days to accomplished it. Here's a solution I can provide for you:
background: linear-gradient(hsl(277, 64%, 61%, 0.5), hsl(277, 64%, 61%, 0.5)), url(../images/image-header-desktop.jpg);
- You should use 'background' as the attribute not 'content'.
- As the first value you use 'linear-gradient' and insert at least two colors in there. Here I use your soft-violet color for both since we don't need any gradient at all.
- At the end of the color-code (here we use 'hsla' instead of 'hsl' because 'a' serves as the opacity value) you can type in any value from 0.0 to 1.0. Just try yourself what opacity you guess fits the most.
- The second value finally is the url() of your image.
Note: I applied it on your content attribute inside your @media query. But still I see some difficulties in your code. If you want to work on this together I'd love to. Just hit me up. I expect to learn a bit more myself.
But anyways. Good job and keep practicing!
Best regards, AkraDEV
Marked as helpful
1
