Last post Jul 14, 2016 03:16 PM by rogersbr
Jul 08, 2016 09:25 PM|rogersbr|LINK
This is just a simple About page. On the left are links to return to the main page. In the right area is some text, phone, etc and a photo. the left/right are used extensively in other pages in the project.
But in the About page, if the screen is squished, on the right will not be visible as the page shrinks because the left part of the #Right area disappears. about 20% of the left margin of the #Right area just goes out of view, no scroll no nothing. I
expected it would start wrapping and hold that left margin solid and as the screen size squishes it wraps and wraps. no it goes away.
Looking for the right way to make an About page with a left zone thats fixed and doesnt move. at least something that looks good and shrinks properly
Jul 09, 2016 10:56 PM|bruce (sqlwork.com)|LINK
use a @media query to place right under the left when too narrow, this is just standard responsive deign. If you don't know responsive design, google the term for tutorials. you also might want to use a responsive framework like bootstrap or foundation.
Jul 11, 2016 02:00 PM|rogersbr|LINK
yes its bootstrap, I use the same CSS for other pages and THOSE pages dont get buried this way, so its just not clear why this page is.
I have the @media tuned for all of those pages, this one behaves differently
Jul 12, 2016 07:12 AM|Fei Han - MSFT|LINK
Firstly, please share us a sample that could reproduce the issue, then we will do our best to find and fix the issue.
Secondly, F12 developer tools enable us to edit HTML and styles in a live page, you could try to modify elements’ box model or top&left property to find and solve display issues.
Jul 14, 2016 03:16 PM|rogersbr|LINK
In this case, since its an About page, I gave up trying to apply the #left and #right css. No idea why other pages work and this didnt. Not worth it. just went back to a plain format. Yes using the F12 tools is helpful I depend on this to find and fix
issues, thanks for your help.