Optimizing Mobile Responsive Design in portafolio-web-dev

The Challenge

In the portafolio-web-dev project, we noticed that the layout consistency was struggling on smaller screens. Specifically, profile images and iconography were breaking the grid, leading to a cluttered interface that distracted from the user experience. Making a portfolio look professional on mobile is just as important as the desktop view—it is the first impression a potential recruiter gets.

The Approach

To address these alignment issues, we focused on refining our CSS media queries and flexbox containers. The goal was to ensure that images scaled gracefully without losing their aspect ratio or overlapping adjacent text elements.

Scaling Assets

We implemented fluid sizing for profile imagery using CSS max-width properties, ensuring the image never overflows its container:

.profile-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

Refining Iconography

For icons, we moved away from fixed pixel sizes, favoring relative units to ensure they maintain visual harmony alongside typography when the viewport shrinks:

.icon-wrapper {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

@media (max-width: 600px) {
  .icon-wrapper {
    gap: 0.25rem;
  }
}

Implementation Steps

We utilized simple shell scripts to automate the minification of these assets during the build process to ensure that responsive adjustments didn't negatively impact our core web vitals:

# Optimize images for web
for img in src/assets/*.png; do
  convert "$img" -resize 300x300 "$img"
done

Key Insight

Responsive design is not just about making things smaller; it is about maintaining hierarchy. By adjusting the gap and max-width properties, we ensured that the mobile view retained the same visual balance as the desktop version without requiring a complete redesign of the components.

Takeaway

Always test your layout with a mobile-first approach. When components break on small screens, look for fixed-width containers first—replacing them with relative units (%, vw, or flex-grow) is usually the simplest path to a robust, responsive interface.

Generated with Gitvlg.com