0

How to solve Lesson 24.2(web dev fundamentals) FORM STYLING

Please, I've tried to solve the code repo in lesson 24.2 (CSS) of web development fundamentals but couldn't , My main issue is to properly attach the br and div tags on the required sections html code, and then also the corresponding CSS code to make it produce the required output. Please,if you have solved this repo, post your html & css form section code for it, Or just tell me what to do about , how to solve it. Below is the html code sample of the form section :. Note:( I already added the div and br tags, but don't know if I did it correctly, you can correct it) <section> <form id="buy"> <div class="form-section"> <label for="Adult">Adult:</label><br> <input type="text" id="Adult" placeholder="Adult tickets"> </div> <div class="form-section"> <label for="Children">Children:</label><br> <input type="text" id="Children" placeholder="Children's tickets"> </div> <div class="form-section"> <input type="button" value="Buy"> </div> </form> </section>

20th Sep 2022, 3:51 PM
Isaac Ugwuanyi
2 Answers
0
Below is the Task Question: To achieve this layout, we need to do the following: 1. Modify the HTML of the form: remove the <br> elements that separate the form into lines. - Add <br> elements after the <label> tags, so that the number field appears after the label, on a new line. - Wrap each section element into <div> tags, and provide them a class="form-section". - Now we will have 3 "form-section" elements. Two of them will contain the labels and their corresponding fields, while the 2rd one will contain the button. 2. In CSS, set the display property of the form to flex. 3. Set the flex property to 1 for the form-section class. 4. For our button, add a height of 40px and set the width to 100%.
20th Sep 2022, 3:53 PM
Isaac Ugwuanyi
0
Second form-section need to be button, but your is third section. You didn't posted css so we can't see are there any other problems. I can't open code repo to solve it, it is only for pro users. Please post also css. If changing order of form sections don't help (not sure why will they set button in between it will not look nice, maybe is just typo "2nd" but need to be "3rd" as you type.) If this is typo html looks fine to me, so problem can be with css code.
20th Sep 2022, 9:40 PM
PanicS
PanicS - avatar