I have a Wordpress Site where I have added a small html,CSS,Js "BraSizeCalculator" app.

When I host this app in a free hosting site (https://brasizecalculator.000webhostapp.com/) it looks fine in mobile screen. Meaning the whole app displays on the mobile screen looks most likely a miniature of the original app.

But once I add it to Wordpress page, only half of the app displays on mobile screen & doesn't allow scrolling horizontally. (http://sklep.opulenzaactive.com/jak-sie-mierzyc/)

So I have modified the CSS elements to take sizes in percentage (eg: width: 23%). in below wordpress site. (http://sklep.opulenzaactive.com/deelliiee/)

It is under construction yet, but I need to know is it possible to get the look in (https://brasizecalculator.000webhostapp.com/) as this site..or ..do I have to keep to above (sklep.opulenzaactive.com/deelliiee/)?

  • Even your first example doesn't show up completely on mobile for me. You can debug this with the small screen simulator in Chrome's inspector: a small icon in the upper left that switches the page size. I'm not sure whether this is really a WordPress problem or something else. And maybe it's easier to write that calculator on your own? It's a dead simple formula that requires very little JavaScript, and you'd get exactly what you need, not one bit more. :) – fuxia Jul 13 '17 at 8:54

The best approach would be as toscho said in the comments - to write your own script an make it mobile friendly from the start. But if you want a quick, temporary solution you could do something like this:

<div id="maincontainerWrapper" style="overflow: auto;">
    <div id="maincontainer" style="position: relative;">

then your calculator app will be accessible in full width by dragging it left and right which would be uncomfortable and unintuitive for your users.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.