I have the layout on my site set up so that it adjusts for mobile browsers using CSS however I have a new page that I added and I can't figure out how to get some of the content to adjust when the screen resolution is much smaller. Look at this page: http://notecorner.com/viewNote.php?id=10013 everything looks fine until the browser is smaller (you can drag the width of your browser smaller to demonstrate this) where it says views, etc. overlaps on the title of the note and where it says favorite note etc. underlines where it says subject. I need it to drop down to a new line when the width of screen resolution is smaller. Anyone know how to do this?
It needs 2 new zero-width elements to clean the floats, I guess. Or perhaps you want to use this instead: http://nicolasgallagher.com/micro-clearfix-hack/ Also, there's 1 element there which doesn't need to have its bottom defined. Hendra
1. remove the float right on .userBox, .profileNav when the screen width size is between 320 and 480 use media queries to achieve this. 2. add a float to the .subHeading on the exact same size as above given (320 - 470) 3. Remove the position relative on .favoriteRate inside the .subHeading These are some things you could do to fix the layout a little otherwise you should full check the sites css as I could see it wasn't really optimized or generalized.
Youo can use bootstrap for responsive web designing. Its very easy and best for responsive web designing i also use bootstrap for responsive designing i have face no such problem in that.