@GProost
What are you most proud of, and what would you do differently next time?
For some reason, the image is not staying inside of the border.. Not really sure on how to fix this...
Latest solutions
Mortgage repayment calculator - HTML, CSS and Javascript
Submitted 11 months agoI did not find yet a solution how to get the area next to the input field to turn red when there is missing information in inputs. I found a way to change the border to red but not the other area which has the €, % and year signs. If there is a easy solution for this please let me know :)
Latest comments
- @Jani-B
Hello,
Overall looks nice but as you already told you had some issue with the img.
Try to change the img "min-width: 100%" to just "width: 100%" Then it will take the 100% of the space available inside the container (width).
I hope this helps :)
Marked as helpful - P@SurajCaseyWhat are you most proud of, and what would you do differently next time?
I am proud that the webpage is responsive to different screen sizes. I would use both grid and flexbox to do it differently next time.
What challenges did you encounter, and how did you overcome them?There were two different images for mobiles and desktop screens. I did not know how to replace for different screen sizes. But while doing this project I learned to replace the images by hiding image and showing only the related image.
What specific areas of your project would you like help with?There is problem with as I have used it for the deducted price and last price. I used grid to show it in the same line. So, the placement for the mobile screen is not exact as the mobile design provided.
@Jani-BHello,
Looks very good :)
With the price and last price. I think the problem you mentioned comes from the following: You have named the divs "price" and then the childredn divs "recent price" and "deducted price". The problem is that when you give the "price"-div a display: grid -> it will also give it to the children as they also have the div with "price" class. I would name the children as "recent-price" and deducted-price" so you would not run to problems so easily. Then it would not copy the class "price" display: grid to all of the divs.
I hope this helps. Great work with the code :)
Marked as helpful - @isabellapabonsWhat specific areas of your project would you like help with?
I had to use a negative margin.
(margin-top: -23rem) on .jeanette-container and .patrick-container
I tried grid-gap and row-gap instead but it did not work. Any ideas on how to reduce the large gap between the grid items and reduce the height of the containers ?
@Jani-BHello,
I would say it is nice work in all :)
I think the problem here is the .kira-container. When the display is over 1400px you have to add to the kira-container the grid-row: 1 / span 2. Currently it takes only 1 column and 1 row. However as the container is longer than the others it will push the 2 other containers long way down. So if you use the grid-row 1 / span 2 -> it should fix the problem. Then you do not need to use the - 23 margin. Then you can use the gap.
Then you can also probably remove the max height 35% from the jonathan and daniel containers (when over 1400px screen width). Then I would also remove the body-containers margin as you can use the gap: 2 rem or similar instead.
It might create a problem on the smaller screen sizes if you remove the margin completely. To fix this I would change so that you use Grid on all the different media query versions and on the wider screens just change the grid-template to different.
I hope you this helps :) sorry if my writing is not the best.
Marked as helpful - @RichardTagoeWhat are you most proud of, and what would you do differently next time?
This time I was able to make my webpage a little more responsive. I was also able to learn how to use Dev tools to help you make your webpage more responsible. Next time i will try to make my CSS code a little more consice.
What challenges did you encounter, and how did you overcome them?When I finished the work, I found out that my work when displayed on my own laptop was very different from what I was anticipating because I didn't use my screen but rather the chrome dev tools through out the work. i don't know if what I did is correct, though.
What specific areas of your project would you like help with?I would like if someone is able to check if my work is responsive and explain to me why my work appeared different on my desktop from what I used
@Jani-BHello,
From my opinion the responsiveness works just fine. and the design looks good. Great work :)
I am not 100% sure why you used so huge fonts on this one. but the design itself and the responsiveness were good. Also you were wondering why your work looked different on your desktop. Maybe you had zoomed on the page? I noticed that the page looks a lot different if you zoom the page - so maybe that is the reason?
Just a hint for the fonts and other sizes -> you can also check our how to use rem instead on px. it works in many situations better.
Only thing i personally (just my personal opinion) would change is the inline css in the index.html. I think it is fine as it is but if you would create a bigger project and you use .css file and also add css in the HTML file - it might get confusing if you get back to the project later and want to change some css.
But I think you code was very clean and easy to follow. ! nice one :)
Marked as helpful - @miomio123What are you most proud of, and what would you do differently next time?
I think result is quite close to the original design
What challenges did you encounter, and how did you overcome them?Took me a long time to understand the grid responsivness
What specific areas of your project would you like help with?Im not sure if my code is clean enough, is there any other ways how to create it ina more efficiant way
@Jani-BNice work. I like the hover effect that you added on the cards.
For the grid I would say it might be better to do it with: grid-template: card 1 for the column 1 + row 1 to 2, card 2 for the column 2 + row 1 card 3 for column 2 + row 2 card 4 for column 3 + row 1 to 2
Sorry Could not write it as grid-template should as the reply field made changes to the order of the words :D I hope you understand what I try to say :D
so that you do not have to use the margin -140px or similar. You did very well with it as the solution works well on the mobile and desktop, but I think the grid-template area would work more easier.
just give the card1 and card4 margin auto and they should sit on the middle and then card 2 and card 3 just fits top of each other.
But I would say the solution was very good :)
Marked as helpful - @H-KeshkWhat are you most proud of, and what would you do differently next time?
*Reaching such a result after completing both HTML & CSS in around 4 months. *Being able to use responsive layout techniques correctly *Trying to finish the project with the minimum number of classes, using the semantic tags names as selectors.
-- Next time I will try to minimize the codes' lines, and write down the media queries codes in more prettier and shortened yet effective way.
What challenges did you encounter, and how did you overcome them?*Add colorful (hr) between sections. -- I found the answer on StackOverflow website, which was adding a top border with the color you want like in the following code: hr { border-top: 1px solid hsl(30, 54%, 90%); }
*How to use internal fonts after using to add fonts by it's external links. -- First mentioning the font from you project's folder:
Then adding that code in CSS: @font-face { font-family: 'Outfit'; src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf); }
*What are the standard dimensions I'm going to use for media queries as screen sizes.. -- I found the solution on Bootstrap website under the section of (Breakpoints) giving the latest dimensions of all usable screens, up to date..
What specific areas of your project would you like help with?I'd like always help with making my code looks more simple and short. Also I'd like to have more help with media queries and moving from query to another smoothly..
@Jani-BLooks good.
I like the good commenting on the CSS. That is something I very often forget to do. It looked very good.
- I noticed that you forgot to change the width 55% for the media query 576px version. for the extra small just make the width something like 100% and everything should work just fine.
It will also help you if you make the general layout mobile first. -> start doing the css for the mobile size. and then change it with media query for bigger screens. This way there is lot less problems as it is easier to adapt to the growing screen size than to screen size that gets smaller.
I hope this helps :) Your solution is very nice !
Marked as helpful
