l am proud that l got to finish the solution
What challenges did you encounter, and how did you overcome them?swapping the image when the device width changes was really a challenge for me but thanks to Google l finally got it right.
What specific areas of your project would you like help with?l would like help in media querries, any tips on how to do them easier
Hello, I need help again with background-image: URL()
this one works on my computer background-image: url(/assets/img/bg-pattern-quotation.svg);
previously I was told to try these and worked on the previous challenge but not on this one background-image: url(/Testimonials/assets/img/bg-pattern-top.svg); background-image: url(../img/bg-pattern-top.svg);
I also tried this but it didn't work either background-image: url('./assets/img/bg-pattern-quotation.svg');
writing this will do the job :- url(/Testimonials/assets/img/bg-pattern-quotation.svg)
The thing I'm proud of is actually solving the challenge using my knowledge and provided articles. The css part wasn't hard apart from centering the ::marker elements in li.
The 1st challenge I faced was a css one, where I had to center the ::marker elements in li because they were not centered. I overcame it by wrapping the li in a span and manually adjusting it. As for another challenge I faced which I'm not sure if I solved correctly is hiding and showing the form itself. I was forced to use !important to overwrite the display property for the form, because without it the .invisible class would just be ignored and I couldn't figure out why.
I'd like someone to give me some feedback on the .invisible class and the !important part of it, because without it, it just wouldn't work and I couldn't figure out why. Any tips or clarification would be great.
very good implementation of challenge. i see you are struggling .invisible class is not working without !important it is because of id has more specificity then class . for styling it is more prefer to use class not id. you can learn more about specificity here you tube link
I can proudly say that I could complete the first challenge successfully with less time. I want to practice more and more flex and grid challenges to improve by styling skills before going to JavaScript challenges.
What challenges did you encounter, and how did you overcome them?I faced a difficulty in placing the image fit to the div element and also responsive design.
What specific areas of your project would you like help with?I would like to get feedback on the CSS code I have written.
i think that your repo is private so no one can see your code. try to change it to public
nice implementation. you can consider to appley min-width on img so it does not get very small
This time, I tried a new workflow. I decided to commit when an element of UI is completely finished. For example when the HTML and CSS of the tag "Learning" was done. I really liked it so I will continue with this workflow. I also managed to use quickly and correctly box-shadow for the shadow of the card. I did check Google for its syntax though.
What challenges did you encounter, and how did you overcome them?The main challenge was to remember the syntax of box-shadow. So I checked on Google, find the MDN article on it, and use its syntax to make the shadow like in the design.
What specific areas of your project would you like help with?If you want to provide a feedback, don't hesitate to answer those questions :
nice implementation of challenge but you could improve some things
I'm most proud of the responsive scaling of the svg and entire card element without the need for media queries.
What challenges did you encounter, and how did you overcome them?I had to figure out how to round the corners of the SVG, which I found the solution to on stack overflow.
What specific areas of your project would you like help with?When the site is viewed in a mobile sized viewport in horizontal mode, the entire project is not displayed. Is this a case that I should be worried about fixing? Or is it normal to decide that the page is not meant to be viewed that way?
It is happening because of flex but don't worry none on use website in horizontal mode(for mobile)
being able to complete this challenge after a few daysssss and i think henceforth i will focus on my consistency...........
What challenges did you encounter, and how did you overcome them?the mathematical analogy and displaying the estimated result. i was able to sort it out by scripting my amount rate and interest rate
What specific areas of your project would you like help with?JS most especially. though there's a slight error with my mortgage amount input..... there's an existing width inside the border, i'll be glad to be corrected.....
Did try #mortgage-amount { width: 100%; }
By the way really nice solution
How do I make it responsive
If you want to make it responsive then use vh(view point height),and vw(view point width) not px(Pixel) px is fixed value but if change that with vw or vh then it automatically become responsive further more use min-height , min-width and max-height,max-width so it does not get to small or to big.
You card looks good but you can change something to make it better
1.border-radius (to round corner) 2.create root variable to store color values 3.add color to the text to create visual hierarchy
Hello guys i hope you like my solution. it is a bit larger then challenge but it's ok , you can give me any improvement in this , and don't forget to like my solution if find it helpful
Proud of:
Challenge:
Solution:
(To understand this further take a loot at the css file and find where i have inserted relatie and absolute on the parent and the child element. The first div being the parent element).
Challenge:
Solution:
I would like help with understanding css a bit more interms of being aware of what properties can be used when some cant or what propeties need to be used in order to create and make things responsive.
i would also like a better understanding of how to code and style code in simpler ways.
You can also consider to make it bit responsive using clamp function(if you don't know about just youtube it) it make it responsive so on larger size it does look good
