What could be causing the globe image to overlap the dropdown/accordion content on the dark section of the homepage on iPhones in Webflow? Additionally, why is the Italic accent font not displaying properly on iPhones in certain areas on the site?

TL;DR
  • Check z-index and positioning by adjusting values and styles for mobile breakpoints.
  • Review and adjust flex and grid layouts using Webflow’s responsive view for mobile compatibility.
  • Ensure font files are uploaded correctly and CSS for the italic font display is consistently applied across breakpoints.
  • Test using browser developer tools and real iPhones for accurate problem diagnosis.

The overlapping issue with the globe image and dropdown/accordion content on iPhones in Webflow can be due to several reasons, including z-index settings and layout configurations. The italic accent font not displaying properly could be related to font file issues or CSS not applied correctly on specific devices.

​

1. Check Z-Index and Positioning

  • Inspect the z-index values: Ensure the z-index of the globe image is lower than the dropdown/accordion content.
  • Verify absolute/relative positioning: Check that positioning styles are correctly set for mobile breakpoints.

​

2. Review Page Layout and Styles

  • Examine flex and grid layouts: Ensure any container or section using flexbox or grid is properly configured for mobile devices.
  • Responsive design checks: Consider using Webflow’s responsive view to adjust layouts for smaller screens.

​

3. Font Display Issue Investigation

  • Ensure font files are uploaded correctly: Double-check that all font weights and styles are uploaded to Webflow.
  • Check CSS for font styles: Confirm that CSS is applied consistently across different breakpoints and that the italic style is set appropriately.

​

4. Device-Specific Testing

  • Use browser tools for mobile: Test using browser developer tools set to emulate iPhone screen resolutions.
  • Test with real devices: If possible, test on actual iPhones to observe behavior not fully replicated in browser tools.

​

Summary

Addressing the overlapping issue may involve adjusting the z-index and layout styles specifically for iPhones. Ensure that font files are correctly uploaded and referenced within the project styles to resolve the italic font display problem.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I fix the issue where a modal in a Webflow CMS collection only overlays the Collection List Wrapper area instead of the entire viewport?
Has anyone successfully implemented form validation in Webflow where an input must equal a specific value, displaying a success message if it matches and an error message if it doesn't?
How can I connect the template I purchased in Webflow to my hosted website project, and how can I work on modifying the template without it being visible to the public?
How can I create a table of contents for my Webflow blog posts like the one shown on this example blog post?
How can I make the Team section in Webflow expand when clicked, pushing down the other sections to reveal the person's bio? Is there a tutorial or guide available for this feature?
Is the CORS error occurring in Webflow or on the server hosting the custom code?
How can I improve the hero design and spacing between page elements on my Webflow website for my wife's gym?
How can I load a JSON file in the Webflow Custom Code section, and where should I place or write a new PHP file to display Jobvite data?
How can Webflow users set up paginated collections using the jquery-pjax library to create a smoother browsing experience?
Can the "Unsubscribe from notifications for this site." link be removed from the emails in Webflow to prevent third-party unsubscribes without warning?
How can I automatically change background images every time a user refreshes my website in Webflow?
How can Webflow users incorporate 3D objects and animations into their websites, interact with them using interactions, scrolling, and mouse movement, and import models and animations from Blender?
How can I make the text in the dropdowns of my FAQ in Webflow break to the next line when the screen size changes?
How can I fix the issue of the text positions changing in Webflow when switching between tablet/mobile and desktop view?
What are the limitations of Webflow CMS items/records and can they be expanded beyond the 10,000 limit?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?