Hi Friends,

After working for 2 days I finished my homepage design with HTML5 and CSS3 syntax.
but when I open this on my Android chrome browser everything looks messy as well as half information.

ex: I created three menu tabs but on my mobile browser i could see only one...rest may be out of screen.
+ I added text on my image they too also looks misalignment.

What do we have to do to make same code run on mobile browser as well?

Thanks,
Regards,
Ankit Baphna

Ok I found using @media feature we have to adapt each elements size and space.
But this is very time consuming.
example: Padding I am giving in px but for media I have to give in percentage to adapt all sizes media.

Is there any other better way to make site mobile compatible?

Optimzing your layout with CSS media querries to adapt for different screen sizes/resolutions is the way to go, but if you're HTML is created following best practices, then it shouldn't be that more work.