search

adrianhajdin / iphone

Recreate the Apple iPhone 15 Pro website, combining GSAP animations and Three.js 3D effects. From custom animations to animated 3D models, this tutorial covers it all.
https://iphone-doc.vercel.app/
1.15k stars 208 forks source link

Footer does not display properly on small screens #7

Open Peng-Yujie opened 7 months ago

Peng-Yujie commented 7 months ago

Description

The footer links get wrapped when the page is not wide enough.

Screenshots

image

Solution

flex-wrap for the outer div might be an easy solution for this matter. It works for me.

<div className="flex flex-wrap">
  {footerLinks.map((link, i) => (
    <p key={link} className="font-semibold text-gray text-xs">
      {link}{' '}
      {i !== footerLinks.length - 1 && (
        <span className="mx-2"> | </span>
      )}
    </p>
  ))}
</div>
image