Apple I-Pad, content "too wide" for screen

I looked through your style.css and see that you have (or the original developer has) used media queries to control what is happening at different size resolutions. Building a responsive theme is heavily dependent on the use of @media queries.

One of the CSS entries is as follows:

media="all"
.et_bloom .et_bloom_popup {
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999999;
}

Modifying the width, for example, reduces the content to be seen on phones

`media=”all”
.et_bloom .et_bloom_popup {
display: none;
top: 0;
left: 0;
width: 50%;
height: 100%;
position: fixed;
z-index: 99999999;
}’

You can inspect these elements with google chrome or with firefox and play with them to see how they are appearing. If you note, these are not defined in a @media query so you have one size defined for every resolution. You really need to define CSS for each of the major resolutions you will be using.

I hope this helps.

Bob, a question and a statement:

.et_bloom

I am assuming refers to the “inline” opt-in form content managed by the bloom plugin….

and where…

.et_bloom_popup

refers to the popup window opt in form (?)

Im going to experiment with this, thank you.

Now, the solution (ahem, HACK) I came up with, was to reduce the margin of the opt-in form on the bottom right of the page. -This is the only element that is too wide for mobile phones. This works almost perfectly. Its slight defect is that on PC browsers the element is about 30 pixels less wide than it could be on the right.

Thanks for your solution, that is the right way.