Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts

    on mobile or tablet my header doesn't centre align

    I have tried to align my blog header image to the centre every way I can think of. Setting the div align=center, setting the style text-align:center; and even just <center> - all of these work on full-res laptop/computer screens but not on mobile or tablets where the image is invariably left or semi-left aligned.

    I'm obviously not amazing with code so some gentle help would be awesome to suggest why it will not align centre on mobile devices.

    Thanks!!

    Web address is: www.seaofghosts.com

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    120
    Thanks
    0
    Thanked 25 Times in 25 Posts
    i think the issue you're finding deals with your viewport:

    Code:
    <meta name="viewport" content="width=device-width" />
    When this is removed your page is 'centered', for my mobile devices when i replaced your meta value with:

    Code:
    <meta name="viewport" content="width=750, initial-scale=1">
    this appears to keep the image centered.

    hope this helps

    Mozilla has information related to this:
    https://developer.mozilla.org/en-US/...wport_meta_tag
    Last edited by Brandnew; 06-27-2013 at 07:52 AM. Reason: adding viewport information
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    New Coder
    Join Date
    Jul 2009
    Posts
    78
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you! That mozilla article was really helpful!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •