WordPress.org

1. EllenCBraun
   Member
   Posted 6 years ago #

   Hi all:)

   I'm using WordPress to build my http://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 1024x768 resolution. However when I change my resolution to 800x600, 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 (1024x768 and 800x600)

   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!!

2. Cypher
   Member
   Posted 6 years ago #

   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

3. moshu
   Member
   Posted 6 years ago #

   Another trick I've used here:
   http://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.

4. EllenCBraun
   Member
   Posted 6 years ago #

   Ok, thanks all:)

Topic Closed

This topic has been closed to new replies.