OVERCOMING CSS STYLING CHALLENGES IN MY 'LOBE WEBPAGE' PROJECT

# OVERCOMING CSS STYLING CHALLENGES IN MY 'LOBE WEBPAGE' PROJECT Live Project: [Lobe Tour](https://lobe-tour-five.vercel.app/) ## Introduction When working on the styling for my Lobe webpage, I encountered several CSS-related challenges that tested my patience and problem-solving skills. While I eventually found solutions, each step provided a valuable learning experience. Below are some of the key CSS issues I faced and how I tackled them: **1. Navbar alignment and spacing issues** One of the first issues I faced was properly aligning the navbar elements. Initially, the navigation items were not centered vertically, and the logo wasn’t properly positioned alongside the text. **Challenges:** * The flex properties didn’t behave as expected. * Unequal spacing between nav items. * The logo and text were not perfectly aligned. **Solution:** I used `display: flex; align-items: center; justify-content: space-between;` for the `.nav-items` container and adjusted the padding and margins to create uniform spacing. I also had to tweak the vertical-align property for the logo text alignment. **2. Hero Section Layout Issues** The hero section, which includes the main title, description, and an image, was another area that required significant styling effort. **Challenges:** * The text was overlapping with the image on smaller screens. * Inconsistent font sizes due to responsive issues. * Difficulty centering the content properly. **Solution:** I used `flex-direction: column;` for mobile screens while keeping `flex-direction: row;` for larger screens. Additionally, I used `text-align: center;` and set max-width on text blocks to prevent excessive stretching. For font responsiveness, I implemented @media queries to adjust sizes dynamically. **3. Footer Layout and Responsiveness** The footer, which contained multiple sections and social icons, initially had layout problems, especially when viewed on smaller screens. **Challenges:** * The footer columns were not stacking properly. * The social icons were misaligned and appearing too small. * Uneven spacing between different sections. **Solution:** I applied `grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));` to make the footer more adaptable. Additionally, I adjusted the font size and spacing for the icons to make them more visually appealing. On smaller screens, I used `flex-wrap: wrap;` to prevent content overflow. **4. Button Styling and Hover Effects** I wanted the buttons, especially the “Download” button, to have a smooth hover effect, but my initial attempts either had no visible. **Challenges:** * Hover transitions were either too slow or not applying correctly. * The button looked inconsistent across different sections. **Solution:** * I added transition: `background-color 0.3s ease-in-out, transform 0.2s ease;` and used `:hover { transform: scale(1.05); }` to make the button interactions smoother. Consistency was maintained by defining a global button style. **5. Font and Icon Issues** While incorporating Google Fonts and Boxicons, I faced loading delays and incorrect icon placements. **Challenges:** * Icons were not displaying correctly. * Font styles were inconsistent across browsers. **Solution:** I ensured all font imports were correctly placed inside the `<head>` section. Additionally, I checked for missing classes in Boxicons and used `font-display: swap;` to improve loading behavior. **Final Thoughts** Styling this webpage was both frustrating and rewarding. Each challenge forced me to improve my understanding of CSS layouts, flexbox, grid, and responsive design. Through troubleshooting and testing, I refined my ability to create a well-structured and visually appealing webpage. In the end, these obstacles made me a more confident front-end developer, reinforcing the importance of persistence and experimentation in web design. **Inspired: [Frontend Practice](https://www.frontendpractice.com/projects/lobe) Liked the article? **[Hack-md](https://hackmd.io/)** is a great platform that hosts thousands of great articles like this. Sign up for free today and enjoy! You can as well follow me on [X (Twitter)](https://x.com/joeyovey1) Github Repo: [Github](https://github.com/joeyovey)