Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image overlapping text using CSS+responsive web design

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #194615
    Catherine M
    Participant

    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;

    }

    #194617
    Paulie_D
    Moderator

    So this is only an iPad issue?

    But fixed/absolute positioning and sizing is inherently unresponsive.

    #194618
    Catherine M
    Participant

    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

    #194619
    Paulie_D
    Moderator

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

    #194629
    Catherine M
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.