Select Bio to go to the prototype website
My question: I need a mobile friendly version of a website. You can do this. I will give you the html first, then the css. Please tell me exactly how to update and revise the html and css to make it mobile friendly.
Claude's Answer:
CSS Changes: Fix the broken media query syntax. Your existing mobile query at the bottom has invalid syntax. Replace the entire media query block with this: (provides a long string of code that includes internal instructions on what each code line does).
HTML Changles: Add grid-area names to your sections. Your CSS uses grid-template-areas, but the HTML elements need matching grid-area names to snap into place. You don’t need to add any new tags—just add a style attribute to each of these five elements: (provides examples what the current code is, and what to change it to).
Summary of What This Fixes
(provides a 2-column summary with problems on the left and their fixes on the right), and then states, “let me know if you’d like me to also handle tablet sizing or any other tweaks!”
My Thoughts:
I was pleasantly surprised at how quickly and how well Claude identified my issues. Granted, my issues were very minor as far as coding goes, but there were several terms I was not quite familiar with or did not think to use that fixed my code. I actually ended up asking the AI several other questions to fix a few minor issues that I could not figure out, including how to get my “published on” text on each page to be on the left and not in the center. Originally, I had the page the way I wanted it, but while attempting media queries the design got messed up and I was unable to figure out a fix. Thanks to Claude I was able to figure out I had a few things basically backwards nested and listed in the wrong areas.
That’s not to say I didn’t run into some issues that Claude was not fixing. Originally, I had my footer and Recent Blog Post sections fixed in place and was using overflow-y: scroll to keep my page fixed while allowing the reader to scroll a longer post. I liked how that worked and looked, but the code Claude gave me to make my design responsive messed with that. I asked Claude to fix that back to the way it was, but it told me to redo what it just told me to change. I have yet to figure out how to make it work that way again on my own, but I’m currently satisfied with the outcome as useable for now while I work on adding content. All in all, I think Claude specifically is a very useful tool in finding a place to start with fixing issues and getting back on track. It’s definitely not perfect though.