Page layout problem

I have designed a page of a religious website which looks fine in all the browsers however, the page breaks like anything in mobile or if you decrease it's size.

I m a new designer and I whatever design I create I always have the same problem.

ourshiaislam.com/nauhay/

Any mistake that you think I doing?

My pages (except this one) looks different(margin, padding infact somewhat broken) in different browsers, is there something that I missing out?

Thanks in advance

 

The link at the bottom indicates that this is a theme quite similar to this one: http://softwarebuzzer.com/ and also looks like the default WP theme http://wordpress.org/extend/themes/twentyten

So what exactly is it that you designed that you are having problems with?

 

There is nothing wrong with the theme, that's working fine. I m having problem with resizing the page, you see the PLAYLIST? on my page, if you resize your browser or open this page in a mobile phone, the playlist and the button will break from its position.

 

I think it's this:

You're using a responsive layout, but this part of the code gives that section a fixed width of 500px which means it won't shrink with the rest of the content.

 

Thanks for the quick reply, actually its important to use that code for the song to play in a small window.
so what do I do to fix it?

 

Being turdpress the markup is automatically trash -- and in this case it's REALLY BAD trash that I'm shocked can even accept responsive layout given the endless pointless DIV for nothing, presentational use of classes, and being another poster child illustrating everything WRONG with HTML 5.

I'd throw it out and start over with a RECOMMENDATION doctype and semantic markup, because to be frank there's nothing there even worth TRYING to save, and to get it truly mobile friendly would be more work from where you're at than it would be starting from scratch.