Jump to content



Photo

Why does "viewport" meta affect my Blog page differently


  • Please log in to reply
3 replies to this topic

#1 jordan.

jordan.

    Neowinian

  • Joined: 14-September 04
  • Location: Antigua, West Indies
  • OS: Windows 7

Posted 15 May 2013 - 01:28

Hi all. I'm trying to get my site to look a bit better in mobile browsers. I've set the following for my viewport:

<meta name="viewport" content="width=480">

When I check the site on an iPhone, all of the pages fill the screen just as I want them to with the exception of the Blog page. I can't for the life of me figure out why that page is different. There is nothing in the source that I can find that would cause different behaviour. I would really appreciate it if someone can help me out here.

The site: http://www.iriefirestudio.com


#2 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 15 May 2013 - 01:59

don't have a phone handy to verify. random suggestion: have you tried viewport: device-width? the whole tag is a mess because of the way the mobile browsers fake ****.

#3 OP jordan.

jordan.

    Neowinian

  • Joined: 14-September 04
  • Location: Antigua, West Indies
  • OS: Windows 7

Posted 15 May 2013 - 03:21

I figured out it had to do with the height of the page. As there were no actual blog posts yet, the height was really small and the browser seemed to zoom in so the height filled the page.

Now I have a new issue though. That brick wall pattern on the home page. Centred fine on desktop, completely out of whack on mobile.

#4 PhilTheThrill

PhilTheThrill

    Neowinian Senior

  • Joined: 28-November 03
  • Location: Canada
  • OS: Win 8.1
  • Phone: WP8

Posted 15 May 2013 - 15:47

I figured out it had to do with the height of the page. As there were no actual blog posts yet, the height was really small and the browser seemed to zoom in so the height filled the page.

Now I have a new issue though. That brick wall pattern on the home page. Centred fine on desktop, completely out of whack on mobile.


You have the brickwall in its own div and you've used position:absolute. That'll likely be the reason it doesn't centre right on smaller screens



Click here to login or here to register to remove this ad, it's free!