Home › Forums › Graphene WordPress theme › Support

Mobile version – header unaligned

  • justineshu

    January 13, 2015 at 12:28 am #9680

    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/

    Mod

    Kenneth John Odle

    January 13, 2015 at 12:40 am #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.

    justineshu

    January 17, 2015 at 12:55 am #44290

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

    Mod

    Kenneth John Odle

    January 17, 2015 at 2:17 am #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.

    justineshu

    January 17, 2015 at 3:39 am #44292

    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?

    Mod

    Kenneth John Odle

    January 17, 2015 at 2:59 pm #44293

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

    justineshu

    January 19, 2015 at 4:31 pm #44294

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

    Mod

    Kenneth John Odle

    January 19, 2015 at 9:12 pm #44295

    Yes, and yes, mostly.

    Mod

    Kenneth John Odle

    January 19, 2015 at 9:15 pm #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.