---
# System prepended metadata

title: 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)
