adrifolio Blog

Trying to control a particular layout when orienting the iPad vertically was driving me insane… until I found this sweet query to tackle it:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
// Styles
// Styles End
}

I had tried different cominations, but what really made it was the “orientation: portrait”. Same thing works for the landscape orientation. The only difference is that the “orientation” should be set to “landscape”.

While ideally the layout should just fall into to place without having to specify rules for one or another orientation, there are sometimes instances (particularly when dealing with multiple columns) that being able to target a specific orientation is crucial.

So always thing twice (I mean 3 times!!) any specific styles you want to place in this query. I can tell you that it will hit you back when making changes to the design. On the other hand if handled carefully you can get a lot from them.

The credit for this query and many more is to Stuff and Nonsense who posted them on the Hardboiled CSS3 Media Queries article.

Sep 24

Home Screen Icon for Iphone and Ipad

I found a sweet piece of code that enables you to create a an icon for your website that can be used when adding it to your home screen on the iPhone or iPad.

Without this piece of code the device will take a screen shot of your web page and create an icon of it. You can imagine how that looks on an icon.

Before start using CSS3 Media Queries make sure mobile devices are not resizing your sceen

I got stated optimizing for mobile devices a web app I’m working on using CSS3 Media Queries, and while I was able to change the layout, color and so forth, it was driving me crazy the fact that the devices where resizing the browser screen to the standard desktop size, making the layout seem tiny.

To avoid this is necessary to use a meta tag on the header section of the HTML page to set the with of your webpage to the with of the device display:

Jul 17

Nov 22

The forgotten a:visited property

At least forgotten by me, the a:visited property is a quick and neat way of making your designs more usable and to even “sensitive” to the touch.

Nov 07

Home Inventory App

Looking for an easy to use app to do my home’s inventory I found one that seems to do the job pretty well. This app is What You Own Home Inventory 4.13 for Mac. Also available for the pc, this app offers a nice interface to quickly add items on your inventory, and attached to them detailed information (such as the purchase price, replacement cost, make, model, brand, etc.) but also images, and receipts and other docs. Pretty slick!

May 11

“Didn’t think a CSS grid system could be so useful until I stared working with 960 grid. So far it looks very promising :)” — http://960.gs/

Designing and coding emails can actually be a lot of fun… well, if you use Mailchimp!

Any web designer that has had to work on either the design and mostly the coding of an email knows the pain it can be. Not only because all of the limitations that email programs impose, and how tedious is the testing, but because you find yourself coding like is 1994. Thankfully there’s Mailchimp! I recently discovered it and can’t be more excited about it.

Apr 30

I absolutely love mailChimp! I singed up for the contest just to try it out and think will stick to it! Cheers for their awesome marketing too :D