Mobile UI Troubleshooting

[Scurrlin]

Hi all,

Love the site design! Truly incredible stuff from the JSM squad. While everything looks great on desktop, I personally was having some issues on mobile. This is how I resolved said issues.

Hero.jsx

I was able to get the videos in the Hero section to play on mobile by making sure the autoPlay and playsInline attribute were present in all three video elements.

<video
  src={getVideoSrc(
    currentIndex === totalVideos - 1 ? 1 : currentIndex
  )}
  loop
  muted
  autoPlay
  playsInline  // Add this line
  className="absolute left-0 top-0 size-full object-cover object-center"
  onLoadedData={handleVideoLoad}
/>

id="current-video" @ line 109

<video
  ref={nextVdRef}
  src={getVideoSrc((currentIndex % totalVideos) + 1)}
  loop
  muted
  autoPlay // Add this line
  playsInline // Add this line
  id="current-video"
  className="size-64 origin-center scale-150 object-cover object-center"
  onLoadedData={handleVideoLoad}
/>

id="next-video" @ line 124

<video
  ref={nextVdRef}
  src={getVideoSrc(currentIndex)}
  loop
  muted
  autoPlay // Add this line
  playsInline // Add this line
  id="next-video"
  className="absolute-center invisible absolute z-20 size-64 object-cover object-center"
  onLoadedData={handleVideoLoad}
/>

Features.jsx

I also needed to add the playsInline attribute to part of the Features.jsx as well to prevent the elements there from automatically going fullscreen on mobile. Here is the updated video element. (starts around line 60)

<div className="relative size-full">
      <video
        src={src}
        loop
        muted
        autoPlay
        playsInline // Add this line
        className="absolute left-0 top-0 size-full object-cover object-center"
      />

Finally, I wanted to make sure the "Nexus" and "Azul" BentoCards in the Features.jsx were aligned/stacked consistently on mobile. Furthermore, I wanted to do this without messing up the medium/larger screen displays. I was able to do this by adjusting the tailwind classes for the div containing the "Zigma", "Nexus", and "Azul" cards as well as the BentoTilt classes.

remove 'grid-rows-3' from div @ line 127

<div className="grid h-[135vh] w-full grid-cols-2 gap-7">

updated "Nexus" BentoTilt @ line 141

<BentoTilt className="bento-tilt_1 row-span-1 col-span-2 md:col-span-1">

updated "Azul" BentoTilt @ line 154

<BentoTilt className="bento-tilt_1 row-span-1 col-span-2 md:col-span-1">