Til Tracker

Form content indented compared to index page

Issue: My form content (.form-container) was slightly indented horizontally compared to the index page content.
Cause: The .form-container CSS rule had horizontal padding (padding: 0 1rem;) while the index page content relied on the body's margin or a container without that specific padding.
Resolution: I removed the horizontal padding (padding: 0 1rem;) from the .form-container CSS rule to align it with the index page's container.
Learning: I learned to ensure consistent container padding/margins across different page templates or layouts for visual alignment and a cohesive look. Inspecting element styles using browser dev tools is helpful.

Tags: frontend ui ux css layout css-alignment padding margin

Learned on: April 19, 2024 Edit

Visual inconsistency between `<a>` link and `<input type='submit'` button

Issue: "Log New Learning" link (<a> styled as button) and "Delete Selected" button (<input type="submit">) had slightly different heights/widths despite sharing similar CSS class (.button).
Resolution: I added explicit box-sizing: border-box;, line-height: 1.5;, and vertical-align: middle; to the shared CSS rule targeting both .button and input[type="submit"].
Learning: I learned that link tags (<a>) and submit inputs (<input type="submit">) can have slightly different default browser rendering regarding padding inclusion (box-sizing), line height, and vertical alignment. Explicitly setting these properties in CSS ensures visual consistency when styling different HTML element types to look like buttons.

Tags: frontend ui ux css html css-alignment button form box-sizing

Learned on: April 19, 2024 Edit

Learnings

Form content indented compared to index page

Visual inconsistency between `<a>` link and `<input type='submit'` button