[Eco Bounty] IoTex.io Mobile Text Wrapping Issue

Issue Summary

The word "machines" in the hero section is incorrectly breaking across lines on mobile devices, displaying as "machin" and "es" instead of keeping the word intact or breaking at appropriate breakpoints.

Bug Details

FieldInformation

URL

https://iotex.io/ioid

Severity

Medium (Visual/UI)

Priority

High (Affects first impression/brand)

Environment

Mobile devices (smartphones)

Component

Hero Section / Headline Typography

Steps to Reproduce

  1. Open a mobile browser (Chrome, Safari, etc.)

  2. Navigate to https://iotex.io/ioid

  3. View the hero section headline

  4. Observe the word "machines" is split across lines as "machin" / "es"

Expected Behavior

The word "machines" should either:

  • Display on a single line

  • Break at appropriate syllable boundaries if necessary (e.g., "ma-" / "chines")

  • Scale font size to fit container width responsively

Actual Behavior

The word "machines" breaks awkwardly as "machin" / "es" creating poor readability and unprofessional appearance.

Suggested Fix

Apply the following CSS adjustments to the headline element:

css

/* Option 1: Prevent word break */ .hero-headline { word-break: keep-all; overflow-wrap: normal; } /* Option 2: Use non-breaking space or   */ /* Change: "machines and AI Agents" */ /* To: "machines and AI Agents" or wrap in nowrap span */ /* Option 3: Responsive font sizing */ @media (max-width: 480px) { .hero-headline { font-size: clamp(1.5rem, 5vw, 2.5rem); } } /* Option 4: Hyphenation control */ .hero-headline { hyphens: auto; hyphenate-limit-chars: 6 3 2; } 

Screenshot Evidence

![Mobile screenshot showing "machin" on one line and "es" on the next line with an orange arrow pointing to the issue]

Additional Context

The page appears to be built with Framer (as indicated by the footer). The issue likely stems from the responsive typography settings not accounting for this specific viewport width where "machines" hits the container boundary.

Impact

  • Negative first impression for mobile visitors

  • Reduced readability of the core value proposition

  • Potential accessibility issues for users with reading difficulties

Wallet Address: io1tkw393kejmxwnd454twc6020sxcyvh5dxqmren

Device & Environment:

-Operating system: Android 13

-Device model: Redmi Note 10 Pro

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board
πŸ’‘

New Issue

Date

20 days ago

Author

cryptotestnet

Subscribe to post

Get notified by email when there are changes.