#1
  1. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    661
    Rep Power
    83

    CSS solution? Or just less waffle?


    All,

    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:

    http://www.wellandpower.net
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    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

    • wellandpower agrees : Great answer! Something new for me!
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    661
    Rep Power
    83
    Kravvitz,

    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?

    TIA

    Also for anyone else looking I found this link a helpful introduction!
    http://css-tricks.com/css-media-queries/
    Last edited by wellandpower; April 16th, 2013 at 04:36 PM. Reason: Added a bit! Then a link!
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    You're welcome.

    Yes, media queries work as a browser window is resized. I recommend you read these as well:
    http://webdesign.tutsplus.com/tutori...port-meta-tag/
    http://petelepage.com/blog/2012/12/using-meta-viewport/
    http://blog.javierusobiaga.com/stop-...il-you-know-ho
    http://webdesignerwall.com/tutorials...ponsive-design
    https://developer.mozilla.org/en/Mob...wport_meta_tag

    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!)
    It's not entirely clear to me what you mean, but I was thinking that the row of 5 could be split into two rows. One thing I would recommend doing would be to remove the margin around #outer and reduce the margin around the right column for screen sizes below width:801px.

    Also I should mention that text-align:justify tends to make text more difficult to read. I generally recommend avoiding the use of it.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Loves Diesel Generators
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2004
    Location
    Lincs - UK
    Posts
    661
    Rep Power
    83
    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!
    If I helped you by some stroke of luck, please add to my reputation by clicking on the icon at the top of my post!
    Perkins Diesel Generators Volvo Diesel Generators xxl.me.uk (my Site)

IMN logo majestic logo threadwatch logo seochat tools logo