Amending css to percentages instead of pixels

StackOverflow https://stackoverflow.com/questions/11921997

  •  25-06-2021
  •  | 
  •  

Question

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!

Was it helpful?

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.

OTHER TIPS

You can take a look to http://adapt.960.gs if you want something more responsive ;) It's quite easy to use:

You have to add the JS file at first:

<script src="js/adapt.min.js" type="test/javascript"></script>

Then CSS (as a fallback in case of JS is deactivated on user browser):

<link type="text/css" rel="stylesheet" href="css/960.min.css" />

At last some JS lines to tell browser to switch the CSS file depends on browser width:

<script type="text/javascript">
  var ADAPT_CONFIG = {
    path: 'assets/css/',
    range: [
      '0px    to 760px  = mobile.css',
      '760px  to 980px  = 720.css',
      '980px  to 1280px = 960.css',
      '1280px to 1600px = 1200.css',
      '1600px to 1920px = 1560.css',
      '1920px           = fluid.css'
    ]
  };
</script>

Then you will be able to use a standard grid in your HTML and it will adapt itself for every uses. The page http://adapt.960.gs/ will provide you additional instruction and demo (try to resize your browser's window or visit it through your mobile) ;)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top