I'm using InDesign 2014 and I'm creating a web-based app with a document size of iPhone. I export using in5 to HTML. I have a home page with buttons and once you click on one of those buttons at the top of the screen I have a Menu button that if triggered, will display a drop down menu. I am using Scale for the Liquid Layout because I want to be able to have the same layout no matter what device I am using.
The web-app looks great on the browser when it's on the iPhone. However, when I open the web-app on a larger device (tablet, computer) the buttons are much much larger. The image of the button is the correct size, but if one was to click to the right of the image (button) the button would still be activated and go to that page. I am trying to make the button only activate when it's inside of the image and button frame.
When I look at the CSS of the export, I see that the buttons for the drop down menu have a width of 47%. Which is the size of the button (and image) on an iPhone. On larger devices the image of the button is only 10% of the screen, but the button activates when you click half across the page, because the button is 47%. When I change the width of the item, it solves the problem, however, there are now spaces in between the drop down buttons.
Does anyone know how to fix this?