Hi,

 

Just started working on my new portfolio and i have a few problems. One is the lobster font appears diffrently arrcoss diffrent computers even within the same browser ie macbook pro firefox displays it every diffrently to imac firefox. It also appears completely diffrent on diffrent orientations of the Ipad :S.

 

Another problem is how it displays on the ipad and iphone. They fit the site on the screen perfectly with no space between the sides making it look awful. Currently i have resolved this by adding left padding to items inside the content div giving some side space but this means i am sacrafising space on normal monitors. Is there a special method to make my site more compatable for tablets and smart phones or should I be using a seprate style sheet to add the padding when users are on an ipad??.

 

My development area is here

 

Thanks for any help

I believe ipad's need the .svg font-face. Don't use google for it and get the full kit from here http://www.fontsquirrel.com/fonts/lobster-two

Totally agree!

FontSquirrel = amazingly useful for getting full @font-face support

 

[EDIT: I knew I'd forgotten something]

I'd recommend using a separate stylesheet for mobile devices as it gives you way more freedom to tinker and perfect the site on phones, tablets etc. Also allows you to design slightly more touch friendly UIs.

Edited August 11, 201115 yr by nuksies

Thanks I shall do that. Does anyone know about the padding issue when viewing I'n tablets and smart phones?. Should I always be using padding I'n my container tag to stop content being pushed to the very sides or should i do that I'n a separate stylesheet that targets these devices

You're expecting too much to get your website to work and look perfect on every device. That is why we use media queries...

I wouldn't imagine many problems with a tablet like an ipad as long as you remember it's a 1024x768 display but when you start with smart phones, as nuksie says, you're going to need a seperate stylesheet if you want it to be all mobile phone/app looking.