WordPress.org

1. cashbagg
   Member
   Posted 3 years ago #

   I have been fiddling with all kinds of things in my theme to try to learn...actually learned alot so far. But when i looked at site on widescreen laptoop, there are problems! i designed site on my desktop 1024x768, and it's fine. How can I get the look to be universal for any resolution?
   heres the site. http://www.hornyoyster.com (safe for work, don't worry)

2. samboll
   moderator
   Posted 3 years ago #

   You probably need to make your theme "flexible" in the css (usually style.css).

3. cashbagg
   Member
   Posted 3 years ago #

   I have been searching all over for some kind of answer to this...not getting anywhere. Anyone?

4. optimisation
   Member
   Posted 3 years ago #

   In your stylesheet, style.css, element widths need to be expressed as a percentage, %, of the screen width. They can then self adjust when displayed in different screen resolutions.

   You currently have many elements width as a fixed number of pixels and hence that is what they are displayed as.

5. cashbagg
   Member
   Posted 3 years ago #

   Ok, so rather than having say "80px" I should express this as "10%"

6. optimisation
   Member
   Posted 3 years ago #

   yes, that is correct, and then look at the output and experiment to get the layout you want.

7. cashbagg
   Member
   Posted 3 years ago #

   in style.css, i made following change:

   #sidebar{
   position:absolute; top:64px; left:0px;
   width:160px;
   height:auto;
   }

   CHANGED TO

   #sidebar{
   position:absolute; top:64px; left:0px;
   width:15%;
   height:auto;
   }

   It definitely was not 15% of my screeen width, became much less, and created different widths for all 3 side bar boxes!

   Any ideas?

8. cashbagg
   Member
   Posted 3 years ago #

   bump!

9. Otto42
   Moderator
   Posted 3 years ago #

   You don't want to just make random bits of it flexible. Consider the design as well. You might want your sidebars to be fixed in size, but have the main content stretch to fill the rest of the space. I don't know, you have to design your site accordingly.

   The general rule is to only use fixed widths when you *want* fixed widths, and use variable widths the rest of the time. Even when you do use fixed widths, remember that different people use different font sizes, so you probably want to express fixed widths of boxes with text in them in terms of em units instead of pixels. Like this: "width: 40em;".

Topic Closed

This topic has been closed to new replies.