jambo81

# May 19, 2013 at 4:42 pm

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:

 HOME            FAQ            LINKS            BLOG            0800 61 22 995

I’ve also tried “width: auto;” with the same result.

Starting to drive me mad so any help really appreciated!

James

Rohithzr

# May 20, 2013 at 4:33 am

try using width as 100%. and add “!important” if needed.
here:

#colorstriptext {

/*just edited part*/

width: 100%;

margin-left: 12%;

}

Edit: Another Suggestion – convert your menu as a list floated left. it wud be better controlled that way.

jambo81

# May 23, 2013 at 5:39 am

Thank you for taking the time to respond. I’ve gone down a different route with it now. You’ve taught me a couple of things I didn’t know though, so time well spent :)

Rohithzr

# May 23, 2013 at 2:34 pm

@jambo81 happy to help, always.