Resize Images for iPad/iPhone?

[twilitegxa]

I have a page at: http://southfloridabridals.com/, and I'm trying to make it compliant with iPads and iPhones, but the header images (named left1.png), isn't resizing for the smaller screen size. Attached is a screenshot of what it looks like in an iPad or iPhone. Can anyone tell me how i can fix this problem?

 

[attachment deleted by admin]

[cssfreakie]

add this

#left_image {
    float: left;
    padding: 0;
   width: 100%;
}

 

I added the width:100%;

[twilitegxa]

The image now shrinks, but when it does, a gap appears underneath it. How can I fix that?!?

[cssfreakie]

use this:

 

 

#left_image {
    float: left;
    padding: 0;
    width: 100%;
}

div#top {
    background-color: #FFFFFF;
    overflow: hidden;
    width: 100%;
}

 

It should work pretty well

[twilitegxa]

Still getting the gap :-( Any other suggestions?

[cssfreakie]

well it should work if you make sure you remove the fixed height that was there first

 

so from

div#top {
    background-color: #FFFFFF;
    height: 200px;
}

to

div#top {
    background-color: #FFFFFF;
    overflow: hidden;
    width: 100%;
}

 

Otherwise clear your browser memory and depending on your host, it can take a while in case they are caching stylesheets.

Otherwise say what browser you use.

 

_edit, i also noticed you websites is loading extremly slow, haven't looked at the cause, but it took 3 seconds

 

 

EDIT: remove the FIIXED HEIGTH at line 68 of your stylesheet, don't get sloppy, you are setting styles for #top at line 68 and 78 !! reduce it to 1 place

[cssfreakie]

Also i can recommend to use a sprite for all those little buttons, at the moment you have 50+ header requests that is quite a lot. I think it can easily be reduced to around 25. makes your pages load a bit faster.

[twilitegxa]

Yeah, that might be a good idea. How can I do that? Can you advise me on this please?

[cssfreakie]

First of all did it work the after removing the fixed height? (i bet it did  )

 

Well, the best thing would be to get familiar with the concept of sprites by following a tutorial.

in a nut shell: Sprites are big images, that have a lot of small images inside them. This for instance what google uses as sprite:

[/img]

Now the trick is that you can target certain positions of that large image.

 

maybe this is a nice tutorial, never seen it , but it was the first google gave: http://websitetips.com/articles/css/sprites/

 

If you want you can post a request on an article at my blog, and I'll do an article on it if the previous was not sufficient.

[twilitegxa]

Yes, it did work, and thank you, I will check that article out and let you know :-)

[cssfreakie]

This also might be something to look at, just for speeding up your website, some best practices from the guys of Yahoo http://developer.yahoo.com/performance/rules.html