hafidinwall
New Member
I have a web page which is designed to have a menu bar on top which is a result of an image repeated on the x-axis. \[code\]width: 900px;margin: 0 auto;background-image: url(/images/white-fade-short.png);background-repeat: repeat-x;\[/code\]The menu links are mentioned on with the above mentioned image as the background.This website renders perfectly fine on the desktop. But when loaded on a smartphone the image of the bar is being rendered much more than the actual webpage size and it scrolls up to a particular length . How can I fix this. The following css properties also have been set to make it compatible to the smartphone display : \[code\]@media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } }\[/code\]Is this code creating a problem in any way?