How to work out Conversions from PX to Percentages

[CarraraWebsiteSolutions]

How to work out Conversions from PX to Percentages? My maths is not very good never go that far in school.

Also is there a nice three or four column footer that I can look at that has social media links etc in code pen I can typed it in search area can’t find any.

Trying to design one with contact icons etc for my movie and games store.

[Paulie_D]

To be honest, px to % is not really something that happens in the real world.

Pretty much every screen will be an individual size and even browsers can’t agree what the page width actually is. Chrome does something funky when a scrollbar is involved but FF & IE don’t.

The ‘latest’ kid on the block is the vh & vw sizes which represent an actual relationship to the viewport but support is pretty light at the moment.

If you want some help on a footer, try designing one in Codepen and we would be happy to help you out with anytg you have trouble with.

Copying / Emulating someone else’s work is not the way to start.

[CarraraWebsiteSolutions]

@Paulie_D

In regards to the footer I am trying to split some LI to have two rows in one column I though it might of been float right but think I have missed a step or two. http://codepen.io/mwbcomputers/pen/JHKoy

Can you point me in the right direction if there is any tutorials and such on it.

[Paulie_D]

Just float the uls to the left.

[CarraraWebsiteSolutions]

will give it a go I know you said don’t use tables.

[Paulie_D]

I’m not saying **never** use tables…just there is no need to use them for layout anymore.

If you have data that needs a table then by all means use one.

[CarraraWebsiteSolutions]

Here a go I have sorta work at footer just a couple of issue trying to figure out http://codepen.io/mwbcomputers/pen/JHKoy

Issue One How would i get in the contact area the Saturday and Sunday and the closed to float right of Monday and Friday.

Also I put a border up just o give a idea when I remove it it look like has quite a big space left do you think I should float the second and third column text to the right

[jurotek]

Hi @mwbcomputers,

[Here is a quick sample…](http://cdpn.io/hoFHl “”) of how I would have gone about it. The CSS has over 130 lines of less code than what you had.

[CarraraWebsiteSolutions]

@jurotek thanks for that will have quick look at it I only just did rough layout before to get a idea. I generally do demo mock ups first.

[theacefes]

> To be honest, px to % is not really something that happens in the real world.

@Paulie_D, care to expand on this? In my experience it’s used in font sizing quite a bit. Unless I misunderstood what you meant.

Here’s a handy converter. http://pxtoem.com/

[Paulie_D]

The concept that a pixel actually represents a % of the viewport is wrong

A 16px font is always going to be 16px tall no matter how tall or wide the viewport is. In that sense, any relationship between px and % is broken.

That’s why the vh & vw properties have been introduced. They actually ARE % of the viewport height and width respectively.

[theacefes]

@Paulie_D – got it!

There was a problem I was working on in the past where another member graciously helped me out and the solution was using vh and vm units…unfortunately since I have to support IE8 it was an unrealistic solution. :(

[Author]

Posts