website breaking up in mobile browser website breaking up in mobile browser
Hi there, I am doing a website for a client and I am trying to get it to run on the major browsers, so I am testing on the usual ones + IE6 and also on a few mobile browsers. On my android phone, the website looks fine on the native browsers but Opera mini is not displaying the content as it should, and it seems to be the only browsers that does this. Here's a picture of how opera mni renders the home page, you can compare it to the link above to get an idea. As you can see there, the picture is somewhat resized whereas I need it full width.
Here's the relevant bits in the css:
/* FOR HOME PAGE SCRIPT */
border:3px solid white;
margin: 0 auto;
/* HOME PAGE SCRIPT END */
What I have tried is to give a width and a height to my pictures, because I have read somewhere here I think, that opera mni resize pictures. So I ended up with
Hi, thanks for the suggestion I tried it but it didn't work unfortunately. Also the percentages should be 100% for both of them because they take the whole div.
Just out of interest, why did you think percentage would work?
I've been experimenting with percentage width:95%; max-width: ____px; min-width: ___px; in fluid layouts. The % max- and min-width's are applied to all the nested elements, including the images. It works OK if the images are same aspect-ratio and size.