-1

I am making a website using Masonry and Magnific Popup. My goal is to make this web site responsive on different devices.

I have resized the browser on desktop to preview it, it resize very well on desktop. But the actual look in my phone is very different.

What it looks like in a resized browser: What it looks like in a resized browser

What it looks like on iPhone: What it looks like in iphone http://media-cache-cd0.pinimg.com/736x/f3/86/9b/f3869b476e6fc31338965a2f6689aa02.jpg

It looks like the whole layout got shift to the left in the phone.The similar problem also occurs in ipad/mini. Any advises are deeply appreciated.

Community
  • 1
  • 1
cheetah
  • 1
  • 2
  • 1
    Its time to learn a responsive CSS framework, try Bootstrap or Foundation. – Sameer Shemna Oct 07 '14 at 18:35
  • You need to post your code. And whilst Bootstrap and Foundation are great resources, there is nothing wrong with trying to use pure css to deal with responsiveness. – lharby Oct 07 '14 at 19:13

1 Answers1

0

Right now, the YouTube video is messing up the page width. Try adding some jQuery to make the youtube width responsive, for example:

  $('iframe').attr('width',$( window ).width());
  $('iframe').attr('height',$( window ).height());

But seriously, this won't solve everything down the line. You should learn Foundation or Bootstrap.

Weird extra page width

aks.
  • 386
  • 1
  • 12