Does anyone see what I’m doing wrong here? I’ve managed to center other elements on the page but I can’t seem to get the form to budge.
Critical Feedback on my code welcomed <3
Well, I got it centered by taking out the bootstrap column sizes but now it’s bigger than I’d prefer :-/ any pointers would be greatly appreciated.
Hi, nice tribute page good work so far, but I do see some issues.
I’d recommend expanding the HTML editor and using the “Tidy HTML” tool that can be accessed via the small drop down menu located at the top right of the HTML editor. This will reformat your HTML to properly indent nested elements. In doing this you’ll see one of the first issues is an incorrectly formatted img tag.
<img class=responsive src="https://thoughtcatalog.files.wordpress.com/2017/01/father-daughter-1.png?w=1140&h=761 alt=" Father and Daughter at the beach ">
The problem is after the &h=761 in the src attribute which should have a ending double quote after it. As it is right now the alt attribute is being considered part of the img src and it throws off the rest of the quotes.
There may be some other issues as well, and the above may not have been causing the centering issue but having malformed (i.e. incorrectly formatted) HTML will certainly throw things off. I’d recommend fixing each issue and then re-using the Tidy utility and continue to go through your code until you can verify all HTML is properly formatted.
Keep up the good work!
1 Like
Another piece of advice is that you may want to read through and spend some time with the grid system examples on the Bootstrap website.
According to the Bootstrap docs there should be wrapping “row divs” (<div class="row">) around the div tags that are attempting to adjust the column usage (like this one that your form is in: div class="col-xs-6 col-sm-4 col-md-4 clo-lg-4 center-block "> also note the misspelling of the last col class “clo-lg-4”).
1 Like
I’m just learning about CodePen myself and I also just realized you can use the “Analyze HTML” option that is located in the same drop down as the “Tidy HTML” option. The Analyze tool will point out issues with your HTML. 
1 Like
Thank you @robertgroves! I’m gonna see if I can hash out your suggestions in the AM. I’ve been infromt of the screen way too long today <3
No problem. It’s always a good idea to take a break after a long session. 
I find that a lot of times after coming back with a fresh brain after a break I’m able to find and address issues that I can’t believe I was overlooking. That’s what happens when you stare at code too long. 
Alright, so I got it figured out. I was targeting the elements rather than the divs in some places and vice versa in other. Thanks for the tip tidying the code definitely helped a bunch. I’m glad now I know I can do what I’m trying to do not just scrape by with whatever works.
1 Like
That’s awesome. Great work!