Categories: Showit / Freelancing / Mobile Optimization
I have built over 90 custom Showit websites. Photographers, florists, therapists, virtual assistants, you name the niche and I have probably designed for it. I preach mobile optimization like it is a religion. I tell every client that a website nobody can use on their phone is money left on the table.
So when a client came to me and said, “Hey Adil, can you just drop an iframe into my Showit site on mobile? It is a page on Hostinger. Should be quick, right?”
I said: “Of course. Give me a few minutes.”
Reader, it was not a few minutes.
What Was Supposed to Be a Simple Job
My client had a stunning retreat landing page built in Canva and hosted on Hostinger. She needed it to appear inside her Showit website on mobile only. Desktop stays the same. Simple embed, one iframe tag, invoice sent, move on.
Here is how Showit handles this: it wraps the external page in an iframe with scrolling disabled because the Showit parent page does all the scrolling itself. The embedded page just sits inside like a picture frame.
Beautiful plan. Innocent plan. Completely naive plan.
Problem 1: The Showit Mobile Page That Refused to Scroll on iPhone
Everything looked gorgeous on first load. The page was stunning. Users could scroll through the header, the retreat details, the host bio, and then suddenly, nothing. The page just sat there like a stubborn cat that had decided it was done walking and would now like to be carried.
On Android? Worked perfectly. Scrolled all the way to the footer like a completely normal, well-adjusted page.
On iPhone? Stopped dead every single time, no matter how hard you swiped.
Why Does Showit Mobile Scroll Stop on iPhone?
Picture the Showit page as a long hotel corridor. The Hostinger iframe is a room inside that corridor. When you walk down the corridor, everything is fine. But iOS Safari has a very specific and very stubborn rule about rooms.
If any element inside the iframe has overflow: hidden on it, iOS treats that element like a sealed glass fish tank. It says: “This is its own scroll zone. I will scroll inside this fish tank until there is nothing left, and then I am done. I am not going back to the corridor. Goodbye.”
So the user’s finger hits one of these invisible fish tanks, drains all the scroll momentum into it, and stops. Everything below, testimonials, pricing, FAQ, the footer, completely unreachable. As if they did not exist.
Android Chrome passes the scroll back to the parent page like a reasonable browser. iOS decided that was too easy and chose chaos.
And overflow: hidden was not just in one place. It was on the background image sections, on every container div, and then there was the sneakiest villain of all. A sticky CTA bar sitting at the bottom of the page with zero opacity, completely invisible to any human being, was still creating a GPU compositing layer that silently intercepted touch events the whole time. Like a bouncer nobody could see, blocking a door nobody knew existed.
The Fix for Showit iPhone Scroll Not Working
Change overflow: hidden to overflow: clip.
That is it. One word. The entire fix.
Both clip content that overflows the box and look absolutely identical on screen. But overflow: hidden tells iOS Safari to create a scroll boundary. overflow: clip tells iOS to clip the visuals and keep scrolling. No boundary, no fish tank, no frozen Showit mobile page.
Apply this across all background sections and container divs on mobile. Then find that invisible fixed element and set it to display: none on mobile because it was never going to work inside a non-scrolling Showit iframe anyway.
Bouncer fired. iPhone scrolled to the footer. I resisted the urge to applaud my own laptop.
Problem 2: The Showit Iframe Height That Was Lying to Everyone
With the scroll unblocked, users could get much further down the page. But they were still hitting a wall somewhere near the bottom third. Progress! But also still broken.
Why Does Showit Iframe Content Get Cut Off on Mobile?
When you embed an external page in Showit, you give the iframe a fixed pixel height in your canvas settings. We had it set to 8000 pixels, which told the browser this iframe is exactly 8000 pixels tall.
On iPhone, that number is law. iOS will not let you scroll past the defined height of a non-scrolling iframe. It does not matter how much content is inside. It does not matter how enthusiastically you swipe. The browser drew a line at 8000 pixels and that line is sacred.
Our page had content taller than 8000 pixels. So users hit the invisible ceiling and bounced back, like walking confidently into what looked like an open doorway and discovering it was painted onto a wall.
The Fix
IN YOUR SHOWIT IFRAME EMBED SETTINGS
Change: height="8000"
To: height="24000"Three extra digits. No CSS, no custom code, no debugging at midnight. Just a bigger number in one field in Showit.
The ceiling moved up. The content became reachable. The client sent a very happy message. I quietly deleted the two hours of notes I had written before realizing what was actually wrong.
The Showit Mobile Iframe Checklist I Wish I Had From the Start
If you are a Showit designer embedding an external page on mobile, save yourself the afternoon:
- Replace overflow: hidden with overflow: clip on mobile. Same visual result, zero scroll trap. This single change fixes the most common Showit mobile issue inside iframe embeds on iOS.
- Set your Showit iframe height much higher than you think you need. iPhone treats that height value as a hard ceiling. If your page is long, start at 20,000 pixels or above.
- Hunt down any position: fixed elements inside the embedded page and hide them on mobile. Even completely invisible ones silently trap touch events on iOS Safari.
The Punchline
I write about Showit all the time. I have posts about what is actually included in a Showit website design package, why mobile matters whether you are building for florists and event planners or brand photographers, and I tell every client that mobile optimization is not optional.
And then I got humbled by a height field and one CSS word.
After 90 plus projects, you would think nothing on a website surprises you anymore. Then iOS Safari shows up and reminds you that it has opinions, those opinions are non-negotiable, and your Android test phone will absolutely lie to your face about whether things are working.
I will probably still say “a few minutes, tops” next time. Because optimism is what gets the work started. iOS is what keeps it interesting.
Have you ever had a five-minute Showit job turn into a full afternoon investigation? Drop it in the comments, misery loves company.
