About.jsx not loading on iphone edge or chrome

[prosenba]

This worked great on chrome or edge on the pc. I tried to remove the motion tags to trouble shoot but get the same issues. Any help would be appreciated.

import React from "react";
import { Tilt } from "react-tilt";
import { motion } from "framer-motion";

import { styles } from "../styles";
import { services } from "../constants";
import { SectionWrapper } from "../hoc";
import { fadeIn, textVariant } from "../utils/motion";

const ServiceCard = ({ index, title, icon }) => (

<motion.div
variants={fadeIn("right", "spring", index * 0.5, 0.75)}
className='w-full green-pink-gradient p-[1px] rounded-[20px] shadow-card' >
<div
options={{
max: 45,
scale: 1,
speed: 450,
}}
className='bg-tertiary rounded-[20px] py-5 px-12 flex justify-evenly items-center flex-col'
>

    <h3 className='text-white text-[20px] font-bold text-center'>
      {title}
    </h3>
  </div>
</motion.div>

);

const About = () => {
return (
<>

          <p className={styles.sectionSubText}>Introduction</p>
          <h2 className={styles.sectionHeadText}>Overview.</h2>
    

 
    <div className='mt-4 text-secondary text-[17px] max-w-3xl leading-[30px]'>
          Lorem ipsum dolor sit amet. Nam molestias ullam sit reprehenderit quaerat est enim vero At molestiae nihil At corrupti consequatur. At voluptatem exercitationem nam quia dolorem ut voluptatem odio hic sunt consequuntur qui saepe neque!

          Eum libero esse et dolorum excepturi et quia sint? Qui voluptatem accusamus 33 tempora modi a modi nihil.

          Aut laudantium ratione et voluptatem reiciendis est ratione nihil ut dicta omnis. Et vitae iusto et harum excepturi eum libero libero vel voluptas beatae cum dolorum placeat! Est doloribus officiis a excepturi fugiat vel pariatur cupiditate non iure porro ut voluptas voluptatem et mollitia vero sed assumenda voluptas. Aut aliquid molestias sit deleniti suscipit aut distinctio quia.
  </div>

      <div className='mt-20 flex flex-col'>
    {services.map((service, index) => (
      <ServiceCard key={service.title} index={index} {...service} />
    ))}
  </div>
</>

);
};

export default SectionWrapper(About, "about");

[SirNick89]

Try decreasing viewport amount of motion section in hoc/SectionWrapper.jsx. It might work

[minhvyha]

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

[Fan-Karwanta]

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

Thanks bro!! It worked for me, been debugging for an hour. Thanks!

[akngngr]

If you get a problem where your work card did not show up when you go to a mobile view (probably because you have too many projects :D), you could use this method as well, I just decrease the viewport amount to 0 and it worked.

Thank you! I have been debugging this issue for a while now and it's finally fixed.