@fibonacci001
Latest comments
- @Julie-Gz
Hi Gift. I agree with Timothy, you might need to add more media queries. There are 5 common break points: <481px for mobile devices 481px - 768px for Ipads and Tablets 769px - 1024px for small screens and laptops 1025px - 1201px for desktops
1201px for Extra large screens.
Try creating media queries for these break points and hopefully it will fix the issue. It's also important to pay attention to semantics when writing code. While your code is good, it is best to use proper semantics because it helps browsers better interpret the content of the page, which is important for accessibility. You can start by wrapping your code in a main element instead of a div. I hope you find this helpful. All the best with your journey :)
- @Zeuhz-Droid@Julie-Gz
Hello, I only managed to complete this challenge today with the help of others in the community and it was a struggle but I'll share my thought process with you. The first step for me was to know the function or job of every field, writing it down or typing it in a text file helps. For example you know that you need the values in the bill and number of people fields as well as the tips, that means you need to return the value and assign it to variable. So you created a variable to hold the values of the bill, number of people and tip, next you want to start calculating so you create a function that will do that but you don't want it to start calculating as soon as the page loads because that will give you NaN(Not a Number) since there's no input, that means you need a trigger something to tell it when to start calculating. By understanding what each element does you can see how they connect with each other. So my advice would be to write your idea down and create the basic variables and functions and then going back to your notes to see how they will work together and then, if you want, you can draw a flow chart. Hope you find this helpful. If you need help with coding javascript let me know, I got a lot of help from the community and I'm eager to share what they taught me. One last thing, if you want to get rid of the scroll bars in the input fields you can use the code below input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
Marked as helpful - @Paula-Carlech@Julie-Gz
Hello Paula, You can use the following code to get rid of the scrollbar in the input fields and then you can change the background color to white using the background property in css.
This removes the scrollbar from Edge and explorer input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } This removes the scrollbar from mozilla firefox input[type=number] { -moz-appearance: textfield; }
Marked as helpful - @bektonix@Julie-Gz
Hello Bektemir,
I just completed this challenge myself. I'm sure there are better ways to do this but I'll share what I did and hopefully you will find it useful.
For the responsive images I used the <picture> tag in the html document. the picture tag allows you to tell the browser which image to use in what screen sizes. The "media" is similar to the media query in css, it allows you to set the conditions under which the image specified in the srcset will be displayed. If you want to know more google "picture tag mdn". <picture> <source media="(max/min-width: )" srcset="image source 1"> <source media="(max/min-width: )" srcset="image source 2"> <img src="fallback image for browsers that don't support the picture tag" alt=""> </picture>
For the overlay, create a div(I'll name it parent here) and inside that div you will add your image and another div called overlay or anything you want. Creating the overlay affect relies on css, so in your css file set the "parent" div' to position: relative, and the "overlay" div to position: absolute, set the height and width in the "overlay" to 100% to cover the entire "parent" div and set the top, left, right, and bottom properties to 0, this will have it cover everything from edge to edge. Also use hsla. In the stule guide you'll find the colours you should use in the design, take the purple colour and change the colour unit from hsl to hsla, the (a) allows you to control the opacity with 1 being opaque and 0 being transparent, play around with it until you find what works best, between 0.4 and 0.6 should be fine I think.
For your last question on which unit to use, I think em works well, you could use % and vw, but I can't give you advice on how because I don't use them, I find it hard to predict how they'll turn out in different screen sizes, especially vw unit, but maybe someone with a better understanding could guide you on this one.
All the best with your work
Marked as helpful
