www.webdeveloper.com
Results 1 to 6 of 6

Thread: website breaking up in mobile browser website breaking up in mobile browser

  1. #1
    Join Date
    Feb 2011
    Location
    London
    Posts
    62

    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:
    Code:
    ...
    /* FOR HOME PAGE SCRIPT */	
    #main_picture
    	{
    		
    		top:50px;
    		position:relative;
    		width:700px;
    		height:450px;
    		border:3px solid white;
    		margin: 0 auto;
    		clear:both;
    		
    	}
    
    #main_picture img
    	{
    	
    		position:absolute;
    		z-index:1;
    			
    	}
    	
    	
    #main_picture img.active
    	{
    	
    		z-index:3;
    	
    	}
    	
    /* 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
    Code:
    ...
    #main_picture img
    	{
    	
    		position:absolute;
    		z-index:1;
    		width:700px;
    		height:450px;
    	
    	}
    ...
    but no joy. SO I removed the height and width from the css and I added it onto the html, so that I had
    Code:
    ...
    		<div id = "main_picture">
    			<img src = "images/homepage/home_0.jpg" alt = " " class = "active" style = "width:700px;height:450px">
    			<img src = "images/homepage/home_1.jpg" alt = " " style = "width:700px;height:450px">
    			<img src = "images/homepage/home_2.jpg" alt = " " style = "width:700px;height:450px">
    		</div><!--END OF main_picture -->
    ...
    Again, no joy. I looked at my css again, but I can't find anything that could prevent the picture from displaying the way it should.

    Also, the script doesn't work in opera mini, and again, I have no idea why. The peculiar thing is that everything works fine in Opera desktop.
    Does anybody have any idea?!
    thanks

  2. #2
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    May be it will be helpful to you to assign width and height attributes in percentage!
    For example:
    Code:
    width: 75&#37;;
    height: 100%;

  3. #3
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    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?
    thanks

  4. #4
    Join Date
    Feb 2012
    Location
    Bokaro Steel City (Jharkhand), India!
    Posts
    194
    Hey! I did not want you to set the width to 75&#37; and the height to 100%.
    I just gave you an example!
    You are free to set whatever value you want them to hold.

  5. #5
    Join Date
    Feb 2011
    Location
    London
    Posts
    62
    oops, sorry, I thought it was a standard thing, apologies!
    I set them both to 100% but I am afraid nothing has changed.

    I have also tried this in the html:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    		<style type="text/css">
    				@media only screen and (max-device-width: 480px)
    				{
    				#main_picture img {width: 100%;}
    				}
    		</style>
    and subsequently this:
    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    		<style type="text/css">
    				@media only screen and (max-device-width: 480px){
    				#main_picture
    				{
    					height: auto;
    					width: 100%:
    					}
    					#main_picture img {
    					width: 100%;
    					}
    				}
    		</style>
    but no joy.
    Just in case you wonder, this is the emulator I am using http://www.opera.com/developer/tools/mini/
    thanks

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    fluid % layouts

    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.

    http://auntnini.webs.com http://www.gerigeans.com
    Last edited by auntnini; 03-14-2012 at 08:23 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles