Search code examples
csswordpresspercent-encoding

Amending css to percentages instead of pixels

I have recently created this WordPress site and have used pixels and margins to create the layout of the two semi-transparent content boxes. However, as I'm sure those more experienced than me are aware this is not at all responsive and not very cross browser friendly either! So I have been advised to swap to percentages rather than pixels but can't work out where to start with my existing CSS!

Will I need to make a layout with 5 columns to achieve this?

  • first column blank to create left hand blank space
  • second column to include larger blue content box
  • third column blank to create space between two columns
  • fourth column smaller blue content box
  • fifth column to create far right hand blank space

Is there an easier way?

Here is a link to my existing stylesheet

Any help would be greatly appreciated, or if I've forgotten to pass on some required information please just let me know!

Solution

  • Simplest way to do this:

    1. Find the widest element. It's width, XXXpx, is going to be your new 100%.

    2. Find every other element with a px value, YYYpx. It's width is going to now be (YYY/XXX * 100)px.

    3. Visually go over your site and make sure everything looks right. Not all styles are meant to be percentage based, so you will need to revert a few here and there.