Fluid Theme, Screen Resolutions, and my Header width?

  • Hi all:)

    I’m using WordPress to build my https://www.raisingsmallsouls.com/dir/parenting-advice/ site. Somehow, WordPress manages to be “fluid” and expand or contract to the width of everyone’s individual screen resolution- MAGIG!!!

    Right now my header is 1024 pixels wide, and looks fine on my 1024×768 resolution. However when I change my resolution to 800×600, it looks terrible, only the first half shows, and a right scroll bar appears in order to see the rest of the header.

    Those are the only 2 resolution choices I have on my 3-year-old PC (1024×768 and 800×600)

    My designer wants to finish up the header, and I’m unsure of how wide it should be? Is there a way to make my header “fluid” so it fits any screen?

    What are the most common resolutions? What percentage of your visitors have uncommon resolutions and would you take them into account when designing your site?

    Thanks!!

Viewing 3 replies - 1 through 3 (of 3 total)

  • The fluidity of the text and the location of the “boxes” comes from the underlying CSS. That is, you usually use the “float” attribute to allow the browser to appropriately place the content.

    This sort of thing doesn’t work with images as they don’t get resized for you dynamically. You can get rid of the bottom scroll bar which is caused by your header if you use the “overflow” feature of CSS.

    Short of that, it might be worthwhile to come up with a text/CSS based header that will shrink and grow as needed.

    Regards

    Another trick I’ve used here:
    https://www.shakespeare-oxford.com/new/
    The actual header image is only about 600px wide and the rest to the right is the bg-colour of the masthead div – actually the same as the colour of the pic.
    (In FF you can right click the image and see it separately).
    Hopefully nobody is going to see it with a resolution smaller than 600 – then there would be horizontal scrolling. But with 800 it works perfectly.

    Thread Starter ellencbraun

    (@ellencbraun)

    Ok, thanks all:)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fluid Theme, Screen Resolutions, and my Header width?’ is closed to new replies.