Events section layout changes when viewing on Safari ios

Question:
The layout for my events section changes from vertical to horizontal when viewing on mobile Safari. It views correctly on Chrome for ios. Has anyone else experienced anything similar? I cant find a fix for it anywhere.

Product:
Wix Studio

What are you trying to achieve:
a fix for the problem.

What have you already tried:
Adjusting the layout, the max size etc

Additional information:
[Include any other pertinent details or information that might be helpful for people to know when trying to answer your question.]

To fix the layout issue in your events section on mobile Safari you can try:

  1. Flexbox or Grid:
  • Consider using Flexbox or CSS Grid to control the layout better, ensuring elements stack vertically.
  1. Overflow Settings:
  • Change the overflow setting of the section to “visible” to help maintain the vertical layout.
  1. Custom CSS:
  • Use custom CSS to enforce a vertical layout for smaller screens:
@media only screen and (max-width: 767px) {
    .your-event-section-class {
        display: flex;
        flex-direction: column;
    }
}

Replace .your-event-section-class with your section’s class or ID.
4. Clear Cache:

  • Clear the browser cache in Safari to ensure you see the latest version of your site.

Contact Wix Support:

  • If the issue continues, reach out to Wix Support for specific assistance.

None of what you suggested worked. I think that it has something to do with the Event section itself, everything else is fine.

Thanks for your help!