twilitegxa Posted March 16, 2011 Share Posted March 16, 2011 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] Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/ Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 add this #left_image { float: left; padding: 0; width: 100%; } I added the width:100%; Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188779 Share on other sites More sharing options...
twilitegxa Posted March 17, 2011 Author Share Posted March 17, 2011 The image now shrinks, but when it does, a gap appears underneath it. How can I fix that?!? Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188822 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 use this: #left_image { float: left; padding: 0; width: 100%; } div#top { background-color: #FFFFFF; overflow: hidden; width: 100%; } It should work pretty well Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188834 Share on other sites More sharing options...
twilitegxa Posted March 17, 2011 Author Share Posted March 17, 2011 Still getting the gap :-( Any other suggestions? Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188839 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188841 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188848 Share on other sites More sharing options...
twilitegxa Posted March 17, 2011 Author Share Posted March 17, 2011 Yeah, that might be a good idea. How can I do that? Can you advise me on this please? Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188849 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188853 Share on other sites More sharing options...
twilitegxa Posted March 17, 2011 Author Share Posted March 17, 2011 Yes, it did work, and thank you, I will check that article out and let you know :-) Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188854 Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/230864-resize-images-for-ipadiphone/#findComment-1188858 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.