0

i have a problem with CSS position of one image on my page. I need it to keep that image in top right corner all time, so i choose to use this style for image: HTML:

 <div class="head">
    <div class="content nm">
        <div class="menu_inline"><a href="Homepage">Home</a></div>
        <div class="menu_inline"><a href="Help">Help Center</a></div>
        <div class="corner">
            <img src="{$basePath}/images/corner.png" alt="GOOGLE PLAY" id="corner">
        </div>
      </div>
    </div>

CSS:

.#corner { display:inline; position: absolute; top:0px; right: 0px;}

Everything works OK in desktop browsers, but problem is, when i load my page on any smartphone (tested Android and iPhone), when i loadd a page, page is zoomed and the picture cover my menu and other content of page. You can see the problem on picture below.

Do you have any advice, how to correct this picture. I understand that browser probably calculate a user width and on then place

link to picture with problem

wohral
  • 85
  • 2
  • 9
  • If you want your page not to «zoom» on load, check if there is a Just remove it or adjust the initial scale value. If removed, then mobile browsers (that I know of) will display your page unzoomed, fitted to width of content. If the page must be zoomed on load, I'd advise some of responsive design — check the width and adjust your image size and/or position. – Matvey Andreyev Nov 05 '12 at 10:04
  • Thank you, it helped me to remove that meta tag – wohral Nov 09 '12 at 06:43

1 Answers1

0

Please Try to add this in your page inside head tag.

Gopikrishna
  • 857
  • 1
  • 8
  • 14