April 16th, 2013, 02:56 PM
CSS solution? Or just less waffle?
Hope you are ok. I have a new design and the old problem of text overflowing in a fluid layout.
The design looks great on my screen, but on smaller screens its not as good, because the images etc are set in %'s for the widths, but the text always remains the same size and as the column becomes smaller the height of course increases.
Is there a solution to this?
I have set the body tags style to a minimum width of 800px. I could set it higher to improve a bit further, about 20% of my users are using a screen resolution of 800px wide however (found in analytics). Any thoughts?
Another solution is to reduce the amount of text. I've noticed a lot of the top websites around the web have very little text on the main pages and leave all the text for specific pages. Is this why? Do people generally agree with this approach?
Any other tips gladly taken!
If needed the page is currently live:
April 16th, 2013, 04:22 PM
These days the best solution is to use responsive design. On my iPhone the width of those text columns is rather small and in portrait orientation, with the exception of the headings, the text is illegibly small without zooming in. I'd recommend reducing the width of the right column via a rule in a media query to allow a wider space for the text.
Comments on this post
April 16th, 2013, 04:32 PM
Thanks, its a great idea.
The big images will be ok, but if I change the balance to enlarge the left column and reduce the right the images would be smaller.
Would it therefore be a good idea to change the number of smaller elements at the bottom on the right to either 4 or 6 from five and then as the width narrows increase the size also so the page flows down on that side? 6 is good as I can have 6,3,2 or 1 in each row. (I doubt 1 as there are two elements above!)
One final question on the media query, does it work as they resize the window, or just on a refresh?
Also for anyone else looking I found this link a helpful introduction!
Last edited by wellandpower; April 16th, 2013 at 04:36 PM.
Reason: Added a bit! Then a link!
April 16th, 2013, 06:15 PM
April 17th, 2013, 01:25 PM
Again thank you for some excellent suggestions!
I am going to apply those things more now and they have already improved the site a lot! Thank you!