Question

I have a series of images lined up using the following code.

HTML for each image is something like…

    <div class="hover panel">
    <div class="front">
        <img src="breeds/Bluefaced_Leicester.jpg" />
    </div>
    </div>

CSS is …

    .panel {
        float: left;
        width: 220px;
        height: 220px;
        margin: 0px;
        padding: 7px;
        position: relative;
        font-size: .8em;
        margin-left: auto;
        margin-right: auto;
        -webkit-perspective: 600px;
    }
    .panel img {
        width: 100%;
    }

Here is what it looks like when I preview it on 480×800 web windows…

Here is what it looks like on the WP7 Emulator…

How can I ensure the images show up as 220px on the WP7?

Answer 1

My solution to this problem was to double the pixel size of all elements within the applications. Not the best solution but it works.