Skip to content
OverviewSolutions
4
Comments
2
Omid Heidarzadeh
@Omid-Heidarzadeh

All comments

  • Phil•30
    @herrentorteSubmitted about 3 years ago

    Hi everyone,

    I have a couple of issues.

    First, when I use a media query to adjust the CSS for mobile devices and I try to set a max screen size, it then seems to work just fine while I check on my desktop computer and adjust the browser window to simulate having a smaller screen. But once it's all done and the final result is published, I then use my actual phone to check and it will display the layout designed for much larger screen sizes. When I check my phone's settings, it says that the screen resolution is 1920x1080. But obviously my phone's screen is actually way smaller than the browser window on my PC, even when the latter is set to something like 600px x 900px. So I wonder whether there is a better way to make the CSS responsive for mobile devices using not the screen's resolution but its actual size.

    Secondly, I had some difficulty making the output section of the calculator (i.e. the right half which includes the resulting tip per person and the total amount etc.) look neat. So I eventually reverted to making the whole section into a table. If I remember correctly, once upon a time, I read that you shouldn't use this workaround for anything other than actual tables. So I wonder, my way of using an HTML table to make sure all the different headings and resultes and so on look nice in order, is this something that is acceptable among professional developers or is it frowned upon?

    Cheers for any feedback!

    Tip Calculator using HTML, CSS and JavaScript

    1
    Omid Heidarzadeh•105
    @Omid-HeidarzadehPosted about 3 years ago

    Hi Phil, this is a success, you have finished the job, although as you mentioned, there is still room for improvement. The first problem is that you did not add the meta viewport tag to the page header. This tag tells the browser to adjust the page width according to the page size.

    <meta name = "viewport" content = "width = device-width, initial-scale = 1>

    The second problem is one of the main challenges that every developer faces in all projects, but the level of experience and skill are their main differences. I recommend that you first look at the details of the CSS Box model and the usual (or sometimes weird) ways to change the appearance and layout of elements (ie margin, padding, text-align, float, vertical-align, line-height, display, position, width, height, top, left, right, bottom, etc.). It is then essential to learn modern methods for arranging elements such as Flexbox and Grid. These two methods are a little bit tricky to learn at first, but once you understand them, you will not give up using them. As another suggestion try to see each page design in smaller boxes and plan. For example in this challenge "tip amount", "/ per person" and its relevant number are a good candidate to be in a wrapper element like <div> which is a block-level element (instead of <tr> element) and it takes all available horizontal space in its parent element.

    Keep up the good work, Have a good day, and happy coding ;)

    0
  • Omid Heidarzadeh•105
    @Omid-HeidarzadehPosted over 3 years ago

    Well done you've got the job done, but at the first glance, there are a few things that seem to be better to consider. 1- Choose better (more specific) names for your CSS id & class selector. Use popular conventions like BEM. when you're designing a component it is important to choose your selectors wisely, for example, setting the width and height of all image tags probably will cause problems later. 2- Try to find a more efficient approach that makes it easier to get your design responsive. The ideal approach needs the least CSS code in @media queries. Use box model concept and wrap the neighbor elements with the same arrangement on different screen sizes with a parent element and just change the flexbox direction in @media queries to achieve the same result. 3- Pay more attention to at least simple accessibility rules like filling alt attribute of image tags. 4- Keep user needs in mind whenever you use JavaScript, make sure to check whether the user needs a different way to return to the previous state or not? in this case clicking the share button is a one-way action. you could use the class toggle method instead of adding or removing classes. As I said, you've done it already, and I hope these tips help you do it more efficiently. Best wishes.

    1