Return to Support

Mobile version – header unaligned

Home Forums Graphene WordPress theme Support Mobile version – header unaligned

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #9680
    justineshu
    Member

    On my android, everything looks perfect except for the header – it’s shifted to the left and has a white box next to it.

    Let me know if this link doesn’t work: https://s3.amazonaws.com/pushbullet-uploads/ujuOYwE0qho-lR1DNq2N3BiNtmuBSayCt0fgaPLhmPk1/Screenshot_2015-01-12-16-27-35.png

    Website: http://newdesign.princeheron.islandnet.com/

    #44289

    That’s not the mobile version, by the way. You’re just viewing the desktop theme on a mobile device.

    You are seeing this problem because you have an extremely wide header image, and the header image has a left margin of -612.5px. So when your browser window becomes narrower than your header image, it gets pulled out of the location you see it when your browser window is wider than your header image.

    You can see the same thing on desktop if you restore down your browser window and make it less than 1225 pixels wide.

    Moved to Support. Please post in the correct section next time.

    #44290
    justineshu
    Member

    Sorry about that. Okay, so what do you suggest I do?

    #44291

    You could use a separate stylesheet for various sizes of mobile devices, but to be honest the point of the css is to keep your header centered in the browser window. Try restoring down your browser window and change the width to see what I mean.

    #44292
    justineshu
    Member

    Good point. I *think* I fixed this, are you able to double check on your end? There is no need to make the width of the page and header smaller than 1225 pixels right?

    #44293

    The blank space is gone, but your header is now off-center. It was better before.

    #44294
    justineshu
    Member

    Do you recommend I make the overall width of the banner and site smaller? Would this rectify the issue?

    #44295

    Yes, and yes, mostly.

    #44296

    Although it is almost impossible to design a site that will look identical or even good on all devices.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.