Update styling for image on the Event Details page

[KnightTheLion]

I wrapped the Event image in a div and set the class name to 'max-w-full'. On my deployed version the image was taking up the whole section as a background image. This styled it appropriately for the deployed mobile view.

[vercel]

@KnightTheLion is attempting to deploy a commit to the JS Mastery Pro Team on Vercel.

A member of the Team first needs to authorize it.

[Moureeswaran2705]

i currently in work to finish the project ,wait 2 days i would be complete

[KnightTheLion]

i currently in work to finish the project ,wait 2 days i would be complete

Ok cool deal @Moureeswaran2705

[Moureeswaran2705]

i currently in work to finish the project ,wait 2 days i would be complete

Ok cool deal @Moureeswaran2705
i completed most of my work it shows some error in payment mode,except that all is good

[KnightTheLion]

i currently in work to finish the project ,wait 2 days i would be complete

Ok cool deal @Moureeswaran2705
i completed most of my work it shows some error in payment mode,except that all is good

@Moureeswaran2705 If you mean your stripe webhook is failing, then you should check you database to make sure your new user was created. If it wasn't it could be because you need to go to Clerk and click on User & Authentication then Email, Phone, Username and make sure all fields say "required" such as name, username and email. This has been a common issue I have seen amongst the youtube community.

[ravindrasirvi609]

@KnightTheLion, could you please explain why users are not being created in MongoDB? I've ensured that all required fields such as name, username, and email have been filled out. This seems to be a recurring problem within the YouTube community. Any insights or possible solutions would be greatly appreciated."

[tonythetaylor]

I ran into the same issue on the EventDetails page and followed this solution from the tailwindcss docs by adding "min-[320px]:h-[25vh]" to the Image className. I added the md: and sm: to debug the sizes when the screen width changed and it works seamlessly on my desktop and mobile devices.

      src={event.imageUrl}
      alt="hero image"
      width={1000}
      height={1000}
      className="h-full min-h-[300px] object-cover object-center md:h-full sm:h-[25vh] min-[320px]:h-[25vh]"

[ravindrasirvi609]

I ran into the same issue and followed this solution from the tailwindcss docs by adding "min-[320px]:h-[25vh]" to the Image className. I added the md: and sm: to debug the sizes when the screen width changed and it works seamlessly on my desktop and mobile devices.

      src={event.imageUrl}
      alt="hero image"
      width={1000}
      height={1000}
      className="h-full min-h-[300px] object-cover object-center md:h-full sm:h-[25vh] min-[320px]:h-[25vh]"

@tonythetaylor , are you referring to the issue of users not being saved in MongoDB?

[tonythetaylor]

@ravindrasirvi609 No, sorry about that. I'm referring to the image in the EventDetails page overlapping the details on mobile screens. Updated my comment to reflect the correct issue.

[ravindrasirvi609]

@ravindrasirvi609 No, sorry about that. I'm referring to the image in the EventDetails page overlapping the details on mobile screens.

Okay 🆗👍

[ravindrasirvi609]

@sourabhnoob It is Fixed you have to check all of your environment variable

[aladdinbruv]

still having the probleme with users are not created in mongo db

[Pratik-003]

Any body can help as my database is not syncing with the clerk and application and no data is showing in my database please feel free to contact me on 7205650815

[Pratik-003]

i currently in work to finish the project ,wait 2 days i would be complete

bro can u help me this project as my mongodb is not connection and no user of data is showing in the database please contact me on +91 7205650815