Image overlapping text using CSS+responsive web design

[Catherine M]

Hi all,

I’m a newbie at this. I’m having a problem with my a few pages on my website. I have set the parameters for an iPad for a responsive design. It seems to be responding, however, I cannot stop the image from overlapping my text. Here is the page (please view on an iPad): http://www.artistandaccomplice.com/smit/think.html

Here are the div tags from the style sheet related to the page:

#bartop_white {
font-size: 1.2em;
border-color: #999999;
color: #333;
height: 100px;
position: fixed;
top: 0px;
width: 200px;
overflow:visible;
}

#left {
text-align: left;
padding-left: 30px;
float: left;
padding-top: 10px;
}

#gallery_single img{
position: relative;
right: -80px;
top: 0px;
overflow:scroll;
max-width:100%;
z-index:5;
}
#caption_single_white {
font-size: 1em;
right: 30px;
position:relative;
overflow: visible;
width: 400px;
position: fixed;
left: 0;
bottom: 0;

}

[Paulie_D]

So this is only an iPad issue?

But fixed/absolute positioning and sizing is inherently unresponsive.

[Catherine M]

Ok, thanks Paulie_D,

But it seems to be happening regardless of my positioning choice (relative etc…) I’ve cycled through them all.

Best,
Catherine

[Paulie_D]

Is it iPad only because desktop had overlap as well. when I checked.

[Catherine M]

It looks fine on mine. Uh oh! What should I do?

[Author]

Posts