#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    1
    Rep Power
    0

    Mobile device allignment problem


    Hi all

    My first post so please be gentle!

    I've added a colostrip to the top of my web page and its not alligning properly, but only on mobile devices - well, at least safari on iphone and ipad and android.

    It appears fine on multiple browsers on my PC so I'm really confused.

    The color strip does not stretch the whole way across the screen on the right and the slide show has been pushed to the right.

    Here is a screen shot from my iphone: theweddingsinger.uk.com/images/screenshot.jpg

    And the live page is: theweddingsinger.uk.com/index1.htm

    My CSS is:

    #colorstrip {
    width: auto; height: 40px;
    text-align: center;
    background-color:#9c2160;
    border-bottom:solid 2px white;
    }



    #colorstriptext
    {
    width:980px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    padding-top:12px;
    text-align:center;
    font-family:arial,verdana,helvetica,'sans serif';
    font-size:8pt;
    font-weight:bold;
    background-color:#9c2160;
    color:#C0C0C0;
    }

    and in my HTML:

    <div id="colorstrip"/>
    <div id="colorstriptext"/>
    <div style="text-align:justify; position:relative; top:300; left:0; font-family:arial,'sans serif'; font-size:10pt; color:#e7e7e7;">
    &nbsp;HOME&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAQ&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;LINKS&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;BLOG&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;0800 61 22 995
    </div>


    I've also tried "width: auto;" with the same result.

    Starting to drive me mad so any help really appreciated!

    James
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    8
    Rep Power
    0
    Have you tried using the value of '100%' for your 'width' property?

IMN logo majestic logo threadwatch logo seochat tools logo