The following code is my current CSS code which needs to be edited in CSS to achieve the above task.

Please show the ammended code in the solution:

main { /* Apply style rules to the diary container here? */ }

section { /* To make sizing easier, include borders or padding in width */ box-sizing: border-box; /* Set a limit on entry widths? */ }

section.entry { background-color: #cbf078; /* This allows us to position each delete button */ position: relative; /* Set a limit on entry height */ min-height: 5rem; }

section.entry button { /* Fix size of delete buttons */ height: 1.5rem; width: 1.5rem; /* Position delete buttons to the top-right of their container */ position: absolute; top: 0; right: 0; /* Fade out delete buttons when not using them */ opacity: 0; transition: opacity 0.3s; }

section.entry:hover button, section.entry button:focus { /* Fade in delete buttons when you hover over an entry or focus on a button (e.g. tab with keyboard) */ opacity: 1; }

section.entry textarea { /* Use a variable-width font */ font-family: sans-serif; /* Make text areas fill their container */ background-color: transparent; border: 5px solid black; width: 100%; height: 100%; resize: none; /* To make sizing easier, include borders or padding in width */ box-sizing: border-box; /* Allow scrolling using keyboard only */ overflow: hidden; }

/* Style every second entry differently */ section.entry:nth-child(2n) { background-color: #f1b963; }

/* Make image entries responsive */ section.entry img { width: 100%; height: auto; }

@media screen and (pointer: coarse) { /* Do not fade delete button on touch screen (no hover) */ section.entry button { opacity: 1; }

section.entry textarea { /* Stop text area going behind delete button if not faded */ padding-right: 1.5rem; /* Allow scrolling with finger */ overflow: scroll; } }

section.button button { /* Make Add entry and Add photo buttons fill their container */ width: 100%; height: 100%; /* Do not add border to width (else it will be over 100%) */ box-sizing: border-box; }

/* Hide the image file input (use JavaScript to click it instead) */ section#image input { display: none; }

/* Style page heading */ h1 { font-size: 1.4rem; /* Reduce gap before/after headings to make things a bit neater */ margin: 0.25rem 0; }

Edit the CSS rules in 'tma03.css' to arrange the diary entries responsively, in rows or columns. (15 marks) The demonstration application presents each entry in its own row - each entry takes the full width of the viewport. This looks OK on a small mobile screen but does not work well on other sizes of screen that Mike expects his guests to use. Mike has said he would like the prototype application to arrange diary entries in rows or columns 'a bit like Post-it notes' (see Figure 1). Figure 1 Different coloured Post-it notes arranged on a wall Apply a technique (or a combination of techniques) to arrange the diary entries appropriately on different sized screens. Choose from the CSS techniques you have encountered in this block for arranging content in response to screen size. You should not change the HTML to achieve the desired result. In your solution document, provide your amended code and screenshots demonstrating the new arrangement of the diary entries for two different types of device. In addition, explain in no more than 150 words how the technique(s) you have selected work to arrange content, and briefly justify why your choice is appropriate for this scenario. If you find there are 'edge cases' where your page does not look in the way you intend, you should make a note of these in your solution document rather than spend a long time trying to fix them. This text would not count as part of the word limit for your explanation above. Making and testing this change The brief is for diary entries to appear 'like Post-it notes' arranged in rows or columns. You can assume that users will not type too much in their diary entries - no more than in the demonstration entries so diary entries will be quite square. Another name for this type of arrangement is a 'tile layout', like square tiles on a kitchen wall or a chess board. Making and testing this change The brief is for diary entries to appear 'like Post-it notes' arranged in rows or columns. You can assume that users will not type too much in their diary entries - no more than in the demonstration entries so diary entries will be quite square. Another name for this type of arrangement is a 'tile layout', like square tiles on a kitchen wall or a chess board. The CSS file contains some hints on how to achieve this: main \{ \} /* Apply style rules to the diary container here? */ section \{ / To make sizing easier, include borders or padding in width */ box-sizing: border-box; / Set a limit on entry widths? */ \} You have explored some CSS techniques for arranging content in Block 3 Part 3. Choose one of these and add some CSS rules to see their effect: - first try to control the shape of the elements, - then add CSS to control how these elements are arranged, - then add CSS to respond to different screen sizes if required. You may need to try a few different approaches before settling on one you're most happy with. Choose what size of screens you expect guests to use while staying and provide screenshots. There is no single perfect solution - the application just needs to look more or less as you intend on the sizes of screen you choose to demonstrate. You do not need to change the position of the 'Add entry' and 'Add photo' buttons - these are in elements and can continue to be presented like diary entries that are buttons