Войти
  • 63Просмотров
  • 1 месяц назадОпубликованоWorlds Worst Web Developer

Watch me fix a silly CSS bug on my own WordPress website

Fixing a Silly CSS Bug on My Own WordPress Site (Lando + Git + VS Code Live Debug!) Wife interrupted take 1 to buy me coffee — worth it. Take 2: I discover a dumb image bug on a site I haven’t touched in forever. Hero images aren’t filling containers on mobile… and it’s 100% my fault. Watch me: Clone from GitHub Spin up Lando (Docker-based local dev) from scratch Fix the bug with a few lines of SCSS Forget to npm install → panic → fix → laugh Push live with my custom GitHub pull plugin (no FTP!) Explain object-fit: cover vs contain with live demos The Bug: Picture element had object-fit: cover… but the img inside didn’t → gaps, stretching, chaos on resize. The Fix: Add width 100%, height 100%, and object-fit: cover to the image. Done. Bonus Crash Course: Why object-fit: cover is your best friend (99% of the time) cover = fill space, crop edges contain = show full image, add letterbox No stretchy, warped images ever again Tools Used: Lando (Docker-powered local WP) VS Code (with creepy mind-reading autocomplete) Git + GitHub (no branches, living dangerously) SCSS → npm build Custom Git pull plugin (deploy in 1 click) Pro Tip: I don’t build sites like this anymore — I use Etch (It's like Dreamweaver for WordPress). No terminal. No bugs like this. Timestamps: 0:10 – Coffee interrupt & bug reveal 1:30 – Cloning from GitHub 2:40 – Lando init (Docker magic) 5:20 – VS Code finds the missing CSS 7:50 – The quick fix + live test 9:25 – Push live… then remember SCSS build 11:10 – object-fit: cover vs contain (visual demo) 13:40 – Why I ditched this workflow for Etch New to dev? You’ll see real Git, local setup, and why object-fit matters. Are you a web dev veteran? Laugh at my rookie mistakes on my own site. Drop a comment: Ever ship a bug this dumb? What’s your go-to local dev tool — Lando, Local, Docker, or something else? #wordpresstraining #WebDev #CSS #Lando #Git #VSCode #ObjectFit #Debugging Looking for web development or branding services? Interested in Etch? Check it out: ?aff=43a07932 (affiliate link) Interested in Automatic CSS? Check it out: (affiliate link)