search

SuperSimpleDev / html-css-course-2022

1.44k stars 1.06k forks source link

Help me please (8d) #51

Closed CindyTheCat closed 1 year ago

CindyTheCat commented 1 year ago

I did everything correctly in 8d.html and 8d.css but every element was offset. I even tried copy+paste, and they still were offset. So I tried to make a new file and copy+paste everything the EXACTLY same and they weren't offset. I clicked inspect and the width of the "sign up" button should be 300px, but the file that was the same with GitHub seems to have a width of 266,4 pixels. I tried 266,4 pixels in my code and it worked. But the file that was the same as GitHub writes that the pixel of the button is 300px. Does anyone know why it changes the width automatically on that file and it doesn't on mine? Here is my code: `<!DOCTYPE html>

Lesson 08 Exercises

Exercise A

Exercise B

Thanks for chatting with our customer support. Would you like to take our quick survey?

Exercise C

Exercise D

`
CindyTheCat commented 1 year ago

I've found the issue whenever I type <!DOCTYPE html> At the start, it gets offset. I still don't know why, can someone help me?

StudioProgrammar commented 1 year ago

Hmm I don't remember much about the lesson, but after copying the solution, I also ran into the same error. Well there's a pretty easy fix, increase the length of the email field to the total length of the two name fields. Then give that same width value to the button. I'll show my code for 8d down below:

Quick note: you may see a line where I styled all the elements at once. I did that just to snatch the styles I already made namely the border-radius and other stuff. But when things became different, I made another style section for the specific element to customize it further. Let me know if you have any questions! Also sorry about the unorganized html code, I don't know how to fix it here.

HTML:

`

` CSS: `.firstname-field, .lastname-field, .email2-field, .signup-button { width: 120px; font-size: 16px; padding-top: 10px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; border-radius: 10px; border-width: 1px; border-color: rgb(200, 200, 200); border-style: solid; } .email2-field, .signup-button { width: 280px; display: block; margin-left: 25px; margin-top: 10px; margin-bottom: 10px; } .signup-button { background-color: rgb(47, 127, 231); color: white; width: 315px; margin-left: 25px; padding-top: 15px; padding-bottom: 15px; font-size: 17px; font-weight: bold; border: none; }`
CindyTheCat commented 1 year ago

Hmm I don't remember much about the lesson, but after copying the solution, I also ran into the same error. Well there's a pretty easy fix, increase the length of the email field to the total length of the two name fields. Then give that same width value to the button. I'll show my code for 8d down below:

Quick note: you may see a line where I styled all the elements at once. I did that just to snatch the styles I already made namely the border-radius and other stuff. But when things became different, I made another style section for the specific element to customize it further. Let me know if you have any questions! Also sorry about the unorganized html code, I don't know how to fix it here.

HTML:

<input class="firstname-field" placeholder="First name" type="text"> <input class="lastname-field" placeholder="Last name" type="text"> <input class="email2-field" placeholder="Email" type="text"> <button class="signup-button">Sign Up</button>

CSS:

`.firstname-field, .lastname-field, .email2-field, .signup-button { width: 120px; font-size: 16px; padding-top: 10px; padding-bottom: 10px; padding-left: 16px; padding-right: 16px; border-radius: 10px; border-width: 1px; border-color: rgb(200, 200, 200); border-style: solid; }

.email2-field, .signup-button { width: 280px; display: block; margin-left: 25px; margin-top: 10px; margin-bottom: 10px; }

.signup-button { background-color: rgb(47, 127, 231); color: white; width: 315px; margin-left: 25px; padding-top: 15px; padding-bottom: 15px; font-size: 17px; font-weight: bold; border: none;

}`

thank you so much, i though i was crazy but seeing someone else experience the same problem made it better. and i've changed my code <3