Problem with Mobile Site

  • «
  • 1 (current)
  • »

mayank

Member

I am using fone skin created by Frank for mobile browsers. Lately I am having trouble with the skin. Somehow the image posted in the article is not adapting to the screen size on mobile device. I noticed this problem with Chrome and Opera app. While on UCBrowser its adapting to the screen size. How to fix it?

My site is www.easydestination.net/blog/

mayank

Member

Hi Leo,

This is the code of the CSS. I have not idea what went wrong that image in articles do not fit to screen size. I considered using % in place of px for image but that would create trouble in the desktop website.

/*  Fone v1.0, an XHTML template for mobile web pages  www.QRdvark.com/templates/fone/  */

/*  Copyright 2011 Azalea Software, Inc. 20mar11 */

/* 'Fone' by Azalea Software, Inc. is licensed under the Creative Commons Attribution 3.0 Unported License (CC BY 3.0) */

/* CSS by Muthu http://discoverweb.info  */



* {

 -webkit-text-size-adjust:none;

}

body {

	background-color:#FFF;

	font-family: Verdana, Geneva, sans-serif;

	font-size: 90%;

	line-height: 145%;

	color: #000;

	margin: 0px;

	padding: 0px;

	/*background: url("bg.jpg") repeat-x scroll 0 -125px transparent;*/

}

.content {

	padding: 0px;

	color: #000;

	margin: 10px;

}

.hangingHead {

	font-size: 15pt;

	font-weight: bold;

	padding-left: 10px;

	padding-top: 50px;

	text-indent: -10px;

	color: #000;

	text-shadow: 0 1px 3px #FFF;

	text-transform: capitalize;

}

.hangingSubhead {

	font-size: 110%;

	padding-left:10px;

	text-indent: -10px;

	font-weight: bold;

	color:#000;

	text-transform: capitalize;

}

.caption {

	font-weight: bold;

}

p {

	padding: 2px 10px;

	margin: 5px 0;;

}

.footer {

	padding: 10px;

	line-height: 175%;

	font-size: 100%;

	background: url("bg.jpg") repeat-x scroll 0 -173px transparent;

	margin:0 -10px;

	text-align: center;

}

.imgRight, .rightbox {

	float: right;

	margin: 15px;

	clear: both;

	-webkit-box-shadow: 0 0 15px #000;

}

.imgLeft, .leftbox {

	float: left;

	margin:15px;

	clear: both;

}

a {

	text-decoration: none;

}

a:link {

	color: #1567c0;

}

a:visited {

	color: #1c907c;

}

a:active {

	color: #72aee9;

}

a:hover  {

	color: #0033cc;

	text-decoration: underline;

}

#menu ul {

	list-style: none;

	margin: 10px;

	padding: 0;

	text-align: center;

}

#menu ul li a {

	background-color: #F3F3F3;

	color: #000;

	border: 1px solid #999;

	display: block;

	font-weight: bold;

	margin-bottom: -1px;

	padding: 6px 10px;

font-size: 50%;

}

#menu ul li:first-child a {

	-webkit-border-top-left-radius: 8px;

	-webkit-border-top-right-radius: 8px;

}

#menu ul li:last-child a {

	-webkit-border-bottom-left-radius: 8px;

	-webkit-border-bottom-right-radius: 8px;

}

#navButtons ul {

	float: left;

	width: 100%;

	padding: 0;

	margin: 0;

	list-style-type: none;

margin-bottom: 15px;

background: url("bg.jpg") repeat-x scroll 0 -125px transparent;

}

#navButtons ul li {

	display: inline;

	margin:0px;

	padding:0px;

}

#navButtons ul a {

	float: left;

	width: auto;

	text-decoration: none;

	color: #121110;

	padding:0 10px;

	color: #003;

	line-height: 35px;

	font-size: 12px;

	font-weight: bold;

	font-family: Arial, Helvetica, sans-serif;

}

#navButtons ul a:hover {

	-webkit-border-radius: 5px;

	background-color: #FFF;

}

#navButtons ul {



}

.hangingSubinfo {

font-size: 0.6em;

}

#headBanner {

height: 190x;

background: url("header.jpg")  

}

#headBanner a, #headBanner a:visited {

color: #000000;

padding: 12px 0 0 8px;

font-size: 2.2em;

}

.loginform .formfield, .commentform .formfield {

display: block;

}

.loginform .formbutton, .commentform .formbutton {

display: block;

}

.MT4{margin-top:4px;}.MT5{margin-top:5px;}.MT10{margin-top:10px;}.MT15{margin-top:15px;}.MT20{margin-top:20px;}
.hder {vertical-align:middle !important;}
.hder a {background:#354754;  color: #fff; font-size:130%; display:block; vertical-align:middle !important;  text-align: center;  text-decoration: none; font-family:"Lucida Grande", arial; padding:12px 0;  border-right:1px solid #ffffff;}
.hder a:hover, .hder a.active {background:#6ea6ba;}
.lbrdt2 { border-top: 3px solid #DADCDE;}
.footer{background:#f3f1ef;}
.PT10{padding-top:10px;}.PT5{padding-top:5px;}.PL5{padding-left:5px;}.PB10{padding-bottom:10px;}.PL8{padding-left:8px;}.PL10{padding-left:10px;}.PT8{padding-top:8px;}.PT20{padding-top:20px;}.PR10{padding-right:10px;}.PB5{padding-bottom:5px;}
.PR10{ padding-right:10px;}
.dblu_12{font-size:120%;  font-family:Arial, Helvetica, sans-serif; color:#394D5B;}
.sh_box{ border-bottom: 3px solid #DADCDE;}
#menu{width:100%; margin:0; background:#fff; visibility:hidden; position:absolute;}

Leo

Administrator

I don't have any experience with adopting sites for mobile browsers and I don't think I can be of much help. But it seems to me that the pictures are shown in the mobile browser with the same size as they are in normal browsers.


mayank

Member

Hi Leo,

Thanks for trying to help me out. I am not sure but I think earlier image used to shrink to screen size. However it is possible that perhaps they used to crop. When I published an article on blog with image inside the rightbox to float it on the right side, the image fit the mobile screen size. A closer look suggested that some part of the image from left of the screen was cropped to fit it.

I would have downloaded the fone skin again but unfortunately it was uploaded by Frank on one of his website which was has removed now.

  • «
  • 1 (current)
  • »